How to Remove a List Group Item's Parent Element

470
2
Jump to solution
01-12-2023 05:48 AM
hectorsalamanca
New Contributor III

I have a list, and there is a delete button in each list group item. The delete button should be used to remove the list item. I can just delete the button right now, but I'd like to remove the entire li part.

 

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>
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

Maybe try this instead:

 

function remove(ev) {
	var listItem = ev.target.parentNode;
	listItem.parentNode.removeChild(listItem);
}

 

View solution in original post

0 Kudos
2 Replies
JoelBennett
MVP Regular Contributor

Maybe try this instead:

 

function remove(ev) {
	var listItem = ev.target.parentNode;
	listItem.parentNode.removeChild(listItem);
}

 

0 Kudos
hectorsalamanca
New Contributor III

Thanks

0 Kudos