I have a list and in each list group item there is a delete button. I would like the delete button to remove the list item. At the moment i can only delete the button but i would like the whole li element to be removed
function remove(ev) {
var elem = document.getElementById(ev.target.id);
elem.this.parentNode.id.remove();
console.log(elem.this.parentNode.id);
}<ul class="list-group">
<li class="list-group-item">
<p>Item 1</p>
<button type="button" id="btn1" onclick="remove(event)" class="Button">Click</button>
</li>
<li class="list-group-item">
<p>Item 1</p>
<button type="button" id="btn1" onclick="remove(event)" class="Button">Click</button>
</li>
</ul>>Solution :
You can use parentNode.remove()
function remove(ev) {
var elem = ev.target; // get the delete button element
elem.parentNode.remove(); // remove the parent li element
}