jQuery clone() function not working properly

Question

Check out my jsFiddle http://jsfiddle.net/JV8eU/

I have clone the div tag using jQuery clone() function

When someone click on "Add new" then new clone of div tag will be added, and when someone click on "Remove" then that div tag will be removed.

There is one problem with that, the original div tag also contain remove button, so someone click on it that time original div tag also removed.

I don't want to show that Remove link at the execution of code, when someone click add then the Remove link appear with the clone of the div tag.

Neel · Accepted Answer · 2013-02-11 08:52:57Z

3

First of all in remove button div give that as hidden and in code make below changes...

$(document).ready(function(){
    $("#Add").click(function(){
        $("#id").removeAttr("hidden");
        $("#id").show("slow");
        var obj =  $("div.content").eq(0).clone(); //this will clone the html elements
        $("div.row").append(obj); //this will append to the existing elements
    });
});

and in body..

<div class="pull-left"><a href="#" onclick='removeDOM(this)' id="id" hidden>Remove</a></div>

edited Feb 11, 2013 at 8:52

answered Feb 11, 2013 at 8:19

Neel

11.7k3 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nix · Accepted Answer · 2013-02-11 08:29:32Z

2

is this what you mean? http://jsfiddle.net/JV8eU/11/

You can dynamically add the remove div before adding new content. like this way: obj.append('<div class="pull-left"><a href="#"onclick="removeDOM(this)">Remove</a></div>');

answered Feb 11, 2013 at 8:29

nix

3,3022 gold badges24 silver badges37 bronze badges

Comments

turiyag · Accepted Answer · 2013-02-11 08:29:56Z

2

Always remember that when overriding default functionality, this is your friend:

e.preventDefault();

This JSFiddle seems to work nicely: http://jsfiddle.net/turiyag/JV8eU/9/ If you're looking to also maintain the initial element, this code would do the trick: http://jsfiddle.net/turiyag/JV8eU/13/

answered Feb 11, 2013 at 8:29

turiyag

2,9073 gold badges25 silver badges21 bronze badges

Comments

Guffa · Accepted Answer · 2013-02-11 08:31:11Z

0

Put a template for the row in a separate element:

<div class="template">
  <div class="content">
    ...the row template goes here
  </div>
</div>
<div class="row">
</div>

Hide the template:

.template { display: none; }

Copy the row from the template once from the start, and when the link is clicked:

function copy() {
    $("div.row").append($(".template .content").clone());
}

$(document).ready(function () {
    copy();
    $("#Add").click(copy);
});

Demo: http://jsfiddle.net/JV8eU/14/

answered Feb 11, 2013 at 8:31

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

bipen · Accepted Answer · 2013-02-11 08:55:33Z

0

remove button form the html and append it whn button is clicked....

 var newRemoveButton ='<div class="pull-left"><a href="#" onclick='removeDOM(this)' id="id" hidden>Remove</a> </div>';
 $(newRemoveButton).appendTo(obj);

you can also have a look to this link to add some effects.

answered Feb 11, 2013 at 8:55

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Vel · Accepted Answer · 2024-07-10 11:50:18Z

0

Just thought of better implementation. Instead of hiding the original one always, hide it conditionally.

Here is JsFiddle

function removeDOM(thisObj){
  if($('.content').size() == 2){
      $($('.remove-link').not(thisObj)[0]).hide();
  }
  if($('.content').size() != 1)
      $(thisObj).parent().parent().remove();
}

The benefit is, user can remove any row whichever he/she want.

edited Jul 10, 2024 at 11:50

Vel

9,4286 gold badges42 silver badges71 bronze badges

answered Feb 11, 2013 at 8:33

Rahul R.

6,5413 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery clone() function not working properly

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related