Jquery, Unable to Remove cloned element

Question

When I try to use clone method in my jquery code, I face some issues in it. I listed it here what I want and what I issue I face.

First Of All let me tell what I want, I want that when I click on add button, my code should clone give id's element with data with remove button. (JS Fiddle)

Here Is My Code : HTML

Code Here : JQ

var id = 0;
$(document).ready(function () {
    $('#todoclone').click(function () {
        $('#cloneelement').clone().appendTo(".cloneelementtable");
        id++;
    });

    /*$('#toremoveclone').click(function() {
               $('#cloneelement').closest('#cloneelement').fadeOut("slow", function(){
             $(this).remove();
              });
            });*/
    $("#toremoveclone").click(function () {
        console.log(id);
        if (id > 1) { //Only apply if the lang field is more than 1
            id = id - 1;
            $("#cloneelement:last").remove();
            console.log(id);
        }
    });
});

I do some search on that and made code like that (Code here : JS Fiddle)

But there are some problem in code, (listed below) 1] I'm unable to remove cloned element, I need to clone it atlist 3 time and after that its only remove once when I click on first minus icon. After that I can't remove more.

Can anyone tell me what to do for solve this kind of problem ?

i.e. Click on Plus button for clone and click on remove button for remove clone.

user405398 · Accepted Answer

The problem is with your $("#toremoveclone").click(...) binding. You were missing few things. Here is working fiddle.

Issues:

ID's should be unique.
You were expecting event delegation, without setting it up.
$("#toremoveclone").click(...) only binds click event to the first #toremoveclone.
To check that add more than 2 clones(Your code needs more than 1 clones to delete one) & delete the first one in your fiddle.
It will get delete. But others won't because, they were not bound to any click event.

Changes I made:

Added a class for the div(toremoveclone).
Changed event binding to

$(".cloneelementtable").on('click', '.toremoveclone', function () {..})
Learn more about Jquery's event delegation in here & here, since If I explain, I may screw it up :(

Jquery, Unable to Remove cloned element

Answers (2)

Issues:

Changes I made:

Related Questions