How to delete an <li> from list with javascript [duplicate]

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! :)

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. — vsync
– vsync, Commented Nov 13, 2018 at 8:04

connexo · Accepted Answer · 2018-11-12 19:27:18Z

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>

zfrisch · Accepted Answer · 2018-11-12 19:37:23Z

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);
};

edited Nov 12, 2018 at 19:37

answered Nov 12, 2018 at 19:16

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

6 Comments

Jared Over a year ago

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 Over a year ago

@Jared What does your list look like markup wise?

Jared Over a year ago

<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 Over a year ago

@Jared Updated!

Jared Over a year ago

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!

|

Collectives™ on Stack Overflow

How to delete an <li> from list with javascript [duplicate]

2 Answers 2

Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Linked

Related