CODEWITHSUNDEEP
javascriptjqueryeventsonclick
Syed Haris Ali Ghaznavi
Syed Haris Ali Ghaznavi

Reputation: 787

Remove div using jQuery not working for dynamically added div

I have added div on a button click, i want the user to be able to delete the added item form the list by clicking "X" which is an anchor, but on its click no event is triggered, Here is my code, I have even tried binding but nothing seems to work.

(function ( $ ) { 
$(document).ready(function(){
$(".btn-add").on("click",function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".this-name").text(); // Find the text

// Let's test it out
$('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button">X</a></div>');
});

});

$("document").on('click','.delete-button', function(e){
 e.preventDefault();
 alert('yes');
 $(this).closest('.item').remove();
});

}( jQuery ));

Any help is appreciated, thanks

Upvotes: 3

Views: 309

Answers (1)

user7488658
user7488658

Reputation: 116

Try this: onClick="$(this).parent().remove();"

(function ( $ ) { 
$(document).ready(function(){
     $(".btn-add").on("click",function() {
         var $row = $(this).closest("tr"); // Find the row
         var $text = $row.find(".this-name").text(); // Find the text
         // Let's test it out
         $('#col2').append('<div class="item"><p>'+$text+'</p><a href="#" class="delete-button" onClick="$(this).parent().remove();">X</a></div>');
     });
});
$(document).on('click','.delete-button', function(e){
    e.preventDefault();
    alert('yes');
    $(this).closest('.item').remove();
});
}( jQuery ));

Upvotes: 2

Related Questions