Button to remove a dynamically created list element using JQuery

Question

I have an ordered list in HTML:

<ol id ="list">
</ol>

which gets added to using JQuery/javascript:

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();
        i++;

        var list = $("#list");
        var name = $("#colleague-select option:selected").text();
        var remove = "<button type='button' class='remove-me'> X </button>";
        var entry = "<li>" + name + remove+ "</li>";
        entry.id = "entryid" + i;

        list.append(entry);

        return false;
    });
});

What I'm trying to do is to allow a user to remove an entry in the list by clicking its corresponding button "X". This is the code I've come up with, but it's not working:

$(function (){
   $(".remove-me").click(function(e){

       var list = $("#list");
       var entry = e.parent(); //find parent entry of clicked "X" button
       list.remove(entry);  //remove entry from list
   });
});

Any help guys? I am fairly new to JQuery so an explanation of your answer code would be much appreciated. Thanks.

rrk · Accepted Answer · 2016-01-25 18:25:32Z

1

You need to use event delegation for binding events to dynamically added elements.

$(document).on('click', ".remove-me", function(e){
    var entry = $(this).parent(); 
    entry.remove();  //remove entry from list
});

answered Jan 25, 2016 at 18:25

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2016-01-25 18:26:48Z

0

just remove the parent element

$(function (){
   $(document).on("click", ".remove-me", function(e){
       $(this).parent().remove(); //find parent entry of clicked "X" button
   });
});

answered Jan 25, 2016 at 18:26

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Alyson Freitas · Accepted Answer · 2016-01-25 18:46:18Z

0

A foolproof way is add the event to the button

<button type='button' onclick='removeMe(this);' class='remove-me'> X </button>

and on js

function removeMe(e)
{
   $(e).parent().remove();
}

answered Jan 25, 2016 at 18:46

Alyson Freitas

1361 silver badge5 bronze badges

Collectives™ on Stack Overflow

Button to remove a dynamically created list element using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related