removing new buttons

Question

I am having some problems with a side project of mine. I have a button that genertes todo lists on a list which includes a button. /putting in a name for an Todo list item + button that makes an list item

$("#NewTodo" ).on("click", function() {

//graps what is in the input field
var TaskName = $("#Task_name").val()
$("#ListContainer").append("<li class='listItem'>" + checker + TaskName + Sizing + prior + "<button class='del'>x</button> </li>")

this works fine. I then want to be able to remove the list item again by pressing the button that is in the newly formed list item. with the class ".del" I do this by getting the parent of the button, which should be the li element and removing it.

// being able to delete items buttin

$('.del').on("click", function(){ $(this).parent().remove()

}); //end remove button funciton.

however this does nothing, and I get no errors. My though was that like you would do a document ready function to make sure that JS is loaded after the DOM; by inserting a new DOM element, JS wont work for that because JS is already loaded.

Answer 1 · 2016-05-18T21:12:49Z

May 18, 2016 9:12pm

You're right that when the button is created, the function that attaches the handler has already happened.

But you can attach a delegated handler to the document body (or any ancestor of the element that will be removed) that will work on elements that are created later, like this:

$(body).on("click", ".del", function(){
    $(this).parent().remove()
});

Welcome to the Treehouse Community

Looking to learn something new?

Lean Rasmussen

Lean Rasmussen

removing new buttons

1 Answer

Steven Parker

Steven Parker