How to delete / remove dynamically created list items in list-group?

Question

In my html I have this code for the list-group:

<ul class="list-group" name="list-group" id="list-group">

I populate this list group via onclick method with this on my js: where a = value of a dropdown button;

 $('#list-group').append('<li>' + a  +'<button id="delete">delete</button></li>');

or

$('#list-group').append('<button type="button" id="delete" class="list-group-item list-group-item-action">' + a + '<span class="pull-right"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></span></button>');

How can I remove the appended list item dynamically? I tried to delete or remove it with this code:

$(".delete").on('click',function () {
    $(this).closest("li").remove();
    alert("clicked");
   });

Thanks in advance!

Use `#delete` instead of `.delete` as you have assigned `id="delete"` and not class — AHMED SAJJAD, Feb 19 '21 at 12:02
@AHMEDSAJJAD if she is populating the button in list then there will be duplicate IDs. please use className in your html code `$('#list-group').append('
Does this answer your question? [How to add a list item to an existing unordered list?](https://stackoverflow.com/questions/1145208/how-to-add-a-list-item-to-an-existing-unordered-list) — ℛɑƒæĿᴿᴹᴿ, Feb 19 '21 at 12:05

Carlos Eduardo Salazar Mori · Answer 1 · 2021-02-19T12:29:32.207

Like @kunal panchal commented, you need to use a className for this, not an ID. That's all you need. Here is the solution in action.

var a = "Something";
for (var i = 0; i < 3; i++) {
    $('#list-group').append('<li>' + a  +'<button class="delete">delete</button></li>');
}


$(".delete").on('click',function () {
  $(this).closest("li").remove();
  alert("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group" name="list-group" id="list-group">
</ul>

Jobelle · Accepted Answer · 2021-02-19T12:43:24.773

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Thus in the following example .delete items must exist before the code is generated.

$(".delete").on('click',function () {
  $(this).closest("li").remove();
  alert("clicked");
});

If new HTML is being injected into the page, it is preferable to use delegated events to attach an event handler, as described next.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

$(document).on('click', '.delete', function(){
    $(this).closest("li").remove();
})

Try the below

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$(".addItems").on('click',function () {
 for (var i = 0; i < 10; i++) {
    $('#list-group').append('<li>ListItem' + i+ '<button class="delete">delete</button></li>');
}
});

$(document).on('click', '.delete', function(){
    $(this).closest("li").remove();
})

});
</script>
</head>
<body>

<button class='addItems' >Add List Items </button>

<ul class="list-group" name="list-group" id="list-group">
</ul>

</body>
</html>

Check This

How to delete / remove dynamically created list items in list-group?

2 Answers2