.remove() function is not working in jquery

Question

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/>

Two problems, 1) use a delegated event handler for the dynamic content 2) use `closest()` not `find()` as you need to go up the DOM tree. The duplicates I marked show more information on both of these issues — Rory McCrossan, Mar 01 '22 at 12:39

score 1 · Answer 1 · answered Mar 01 '22 at 12:01

1

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()

answered Mar 01 '22 at 12:01

Gabriel Slomka

1,487
1
11
24

Or even the `.closest()` method. – Andrew Corrigan Mar 01 '22 at 12:05

score 0 · Answer 2 · answered Mar 01 '22 at 12:08

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();

.remove() function is not working in jquery

2 Answers2