CODEWITHSUNDEEP
jquery
Sumit Bijvani
Sumit Bijvani

Reputation: 8179

jQuery clone() function not working properly

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.

Upvotes: 1

Views: 2818

Answers (6)

Rahul R.
Rahul R.

Reputation: 6471

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.

Upvotes: 0

bipen
bipen

Reputation: 36551

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.

Upvotes: 0

Neel
Neel

Reputation: 11741

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>

Upvotes: 3

Guffa
Guffa

Reputation: 700800

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/

Upvotes: 0

turiyag
turiyag

Reputation: 2897

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/

Upvotes: 2

nix
nix

Reputation: 3302

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>');

Upvotes: 2

Related Questions