I want to remove the dynamically added div and its not working. I tried all techniques not unable to solve this.
var date = document.querySelector("#heading > h1");
var today = new Date();
var options = {
weekday: "long",
day: "numeric",
month: "long"
};
var day = today.toLocaleDateString("en-US", options);
date.innerHTML = day;
$("#newItem").click(function(){
var text = $("#itemAdder > input").val();
$("#itemAdder").before('<div class="item"><input type="checkbox"><p>' + text +'</p><span class="material-icons md-18 toDelete">delete</span></div>');
$("#itemAdder > input").val("");
});
$("span").on("click", function() {
$(this).find(".item").remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="heading">
<h1></h1>
</div>
<div class="box">
<div class="item">
<input type="checkbox">
<p>Hello World</p>
<span class="material-icons md-18 toDelete">delete</span>
</div>
<div class="item" id="itemAdder">
<input type="text" placeholder="New Item" autocomplete="off">
<button id="newItem">+</button>
</div>
</div>
<br/>It's not working because you are searching for .item inside
$("span").on("click", function() { $(this).find(".item")
To make this work you can try $(this).parent().remove()
The find() is an inbuilt method in jQuery that is used to find all the descendant elements of the selected element. It will traverse all the way down to the last leaf of the selected element in the DOM tree You should use the
$(this).parent(".item").remove();
instead of
$(this).find(".item").remove();