js delete parent element

Question

I have a problem that when I try to delete the li that I made in js, the following code will delete all the list not just the clicked li
and when choosing the parent the span does not work properly

function showdata() {
    var newtodo = $("#newtodo").val();
    $("ol").append('<li class"batodo" >' + newtodo + '<span   class="deltodo">' +" x" + "</span>" + "</li>");
}

$(".deltodo").click(function() {
    $(this).parents(".batodo").remove();
});

I'm guessing your elements are organized in a tree structure and the root is being deleted. If so, you should replace `parents(".batodo")` with `closest(".batodo")`. Can you confirm or show us some html example? — Alexandru Severin, Dec 30 '16 at 12:48
@Satpal Although OP is incorrectly using event binding, his question title and description suggest a totally different problem. I don't see this as a duplicate, or at least not of `Event binding on dynamically created elements` — Alexandru Severin, Dec 30 '16 at 13:02
have you tried to console.log($(this)) to make sure that it's targeting the right element. It should but you never know. — 404answernotfound, Dec 30 '16 at 13:20

score 1 · Accepted Answer · answered Dec 30 '16 at 13:54

1

In this case you can use:

$(this).parent().remove();

answered Dec 30 '16 at 13:54

Serg Chernata

12,280
6
32
50

score 0 · Answer 2 · answered Dec 30 '16 at 15:10

the working code thanks for helping :)

function showdata() {
var newtodo = $("#newtodo").val();
$("ol").append('<li class"batodo" >' + newtodo + '<span class="deltodo">' +" del" + '</span>' + "</li>");
$(".deltodo").click(function(){
        $(this).parents("li:first").remove();
    });

};

js delete parent element

2 Answers2