Quiero eliminar el div agregado dinámicamente y no funciona. Intenté todas las técnicas que no pudieron resolver esto.
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/>No funciona porque está buscando .item dentro
$("span").on("click", function() { $(this).find(".item") Para que esto funcione, puede probar $(this).parent().remove()
El find() es un método incorporado en jQuery que se usa para encontrar todos los elementos descendientes del elemento seleccionado. Recorrerá todo el camino hasta la última hoja del elemento seleccionado en el árbol DOM. Debe usar el
$(this).parent(".item").remove();en vez de
$(this).find(".item").remove();