how do you remove the top level parentElement of the div. I have been trying to remove the top Parent Element of the 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(); //
}Firstly, in your innerHTML the last div is not colsed (should be </div>).
Secondly, in the deleteItem function e.currentTarget doesn't exist. You've to use e.target.parentElement to get the parent node.
And lastly why you're setting type="button" in the button element? Isn't it already a button?!
Here is my working solution.
// 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();
}look into my experiment, firstly i fix your html tag, the last div should be </div> instead of <div>, and then i do some improvement of your code, i made it more than 1 POST, I looping for each button class in POST, then add event every element.
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>is this solution that are you looking for ?