¿Cómo se elimina el elemento principal de nivel superior del div? He estado tratando de eliminar el elemento principal superior del div.
element.innerHTML = ` <div class="postIt-item"> <div class="postIt-item-btn-container"> <button class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i></button> <button class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i></button> </div> <p> ${value}</p> <div> ` const deletebtn = element.querySelector('.btn-delete'); deletebtn.addEventListener('click', deleteItem); //delete function function deleteItem(e) { const element = e.currentTarget.parentElement.parentElement; e.parentElement.remove(); // }En primer lugar, en su innerHTML interno, el último div no está alineado (debería ser </div> ).
En segundo lugar, en la función deleteItem , e.currentTarget no existe. Debe usar e.target.parentElement para obtener el nodo principal.
Y, por último, ¿por qué está configurando type="button" en el elemento de botón? ¿No es ya un botón?
Aquí está mi solución de trabajo.
// I added later for testing in the browser---------\ const value = "Some value here"; const element = document.createElement("div"); // -------------------------------------------------/ element.innerHTML = ` <div class="postIt-item"> <div class="postIt-item-btn-container"> <button class="btn-delete">Delete</button> <button class="btn-edit">Edit</button> </div> <p>${value}</p> </div> `; document.body.appendChild(element); const deleteButton = element.querySelector(".btn-delete"); deleteButton.addEventListener("click", deleteItem); //delete function function deleteItem(e) { const parent = e.target.parentElement; parent.remove(); }observe mi experimento, primero arreglo su etiqueta html, el último div debe ser </div> en lugar de <div> , y luego realizo algunas mejoras en su código, lo hice más de 1 POST, hice un bucle para cada botón class en POST, luego agregue el evento cada elemento.
let value = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. "; let element = document.getElementById("data"); element.innerHTML = ` <div id="list-post"> <div class="postIt-item"> POST 1 <div class="postIt-item-btn-container"> <button class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button> <button class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i>Edit </button> </div> <p> ${value}</p> </div> <div class="postIt-item"> POST 2 <div class="postIt-item-btn-container"> <button class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button> <button class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i>Edit </button> </div> <p> ${value}</p> </div> </div> ` var ps = document.getElementsByClassName('btn-delete'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addEventListener('click', hide, false); } // console: print <body> function hide(e){ e.currentTarget.parentNode.parentElement.remove(); // When this function is used as an event handler: this === e.currentTarget } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <div id="data"></div>¿Es esta la solución que estás buscando?