How to delete an <li> from list with javascript

Question

What im trying to do is to remove whatever list item a user clicks on from the DOM using javscript. This is my code:

// Delete shape from ul event
    shapeList.onclick = function (event) {
        var shapesArray = shapesCtrl.getShapesArray();
        var target = event.target; // Getting which <li> was clicked
        var id = target.parentNode.id; // Getting the value of the li that was clicked
        canvasCtrl.deleteShape(shapesArray, id); // Deleting the targeted element from the array 

        var li = shapeList.childNodes;

        // Above i remove the object that the corresponds with the li the user clicked on but i cant remove the actual li itself... Ive tried to use li[id].remove() but it just keeps removing the 1st li even though the id might point to the last item for example.

    };

Can anybody please help me do this with vanilla js and not jquery. Thanks! :)

Solution 1

Based on your markup:

<ul id ="shape-list" class="list-group mt-3 mb-3"> 
<li>Link: url.com <i class="delete-icon fas fa-trash-alt"></i> </li> 
</ul>

You can simply use the Node method removeChild. This is assuming that the i tag is the target in your event.

 target.parentNode.parentNode.removeChild(target.parentNode);

And inside of your code:

// Delete shape from ul event
shapeList.onclick = function (event) {
    var shapesArray = shapesCtrl.getShapesArray();
    var target = event.target; // Getting which <li> was clicked
    var id = target.parentNode.id; // Getting the value of the li that was clicked
    canvasCtrl.deleteShape(shapesArray, id); // Deleting the targeted element from the array 

    var li = shapeList.childNodes;

    target.parentNode.parentNode.removeChild(target.parentNode);
};

Solution 2

I don't know what your list looks like, but you should be able to adopt this accordingly.

const lis = [...document.querySelectorAll('.this-list li')];

for (const li of lis) {
  li.addEventListener('click', function() {
    this.parentNode.removeChild(this);
  })
}

<ul class="this-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

If you prefer a delegate listener on the ul itself, here you go:

const ul = document.querySelector('.this-list');

ul.addEventListener('click', function(e) {
  this.removeChild(e.target);
})

<ul class="this-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

This has the advantage that it works for dynamically created list items, too:

const ul = document.querySelector('.this-list');

for (let i=0; i<5; i++) {
  let li = document.createElement('li');
  li.textContent = `Item ${i+1}`;
  ul.appendChild(li);
}

ul.addEventListener('click', function(e) {
  this.removeChild(e.target);
})

<ul class="this-list"></ul>

Comments

[vsync]

This is primarily a question about removal of DOM nodes, which has plenty information on Google. The other part of this question is about onClick event listener, which also has more than enough answers on Google. There was no need to ask this question here, Stackoverflow is packed with information on these subjects.

[Jared]

Thanks for the quick reply! I forgot to mention the target element is actualy an icon so when i use your code it just delete the little bin. I tried target.parentNode.removeChild(target.parentNode); but it didnt work so im not really sure how to target it

[zfrisch]

@Jared What does your list look like markup wise?

[Jared]

<ul id ="shape-list" class="list-group mt-3 mb-3"> <li>Link: url.com <i class="delete-icon fas fa-trash-alt"></i> </li> </ul>

[zfrisch]

@Jared Updated!

[Jared]

I managed to get it sorted. The problem was i was targeting the li and not the ul. I changed that last line to shapeList.removeChild(target.parentNode) and its working how i want it :) Thanks fro the help though!

[connexo]

target.closest('ul').removeChild(target.closest('li')) would probably make it less dependent on the actual HTML structure.