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

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!

2 thoughts on “How to delete / remove dynamically created list items in list-group?”

  1. 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>
    Reply
  2. 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

    Reply

Leave a Comment