Odtnhj

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

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

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>