Delete list item based on Hyperlink in JavaScript?

Question

I hava a list of URLs structured in UL and LI tags, and I want to delete a specific link that contains for example this link www.debug.to using JavaScript or Jquery, unforthunatly I don't have any class or ID to can delete it, so How can I delete a list item based on hyperlink or the displayed text using JS or JQuery?

<div class="URL-links">
<ul>
<li> 
<a href=www.debug.to>deBUG</a>
</li>

<li>
<a href=www.example.com>example</a>
</li>

</ul>
</div>

 

Answer 1

Delete a specific list item in JavaScript

To delete a specific list item in JavaScript, you can use querySelector() method to return the div that contains that list, then loop over all the li elements in that div and check if the a tag contains the text "deBUG" if so delete it.

var listDiv = document.querySelector('.URL-links');
var listItems = listDiv.querySelector('li');

listItems.forEach( item => {
 var a = item.querySelector('a');
 if ( a.innerText == "deBUG"){
    item.remove();
   }
});

or you can delete the link by it hypertext reference by changing the if condition to:

if ( a.href == "www.debug.to") {
   item.remove();
 }

This might also be done with jquery:

$(‘.URL-links’).find(‘li’).each( function () { if($(this).find(‘a[href*=“debug”]’).length > 0 ) $(this).remove();  });