Traté de hacer un código para eliminar un li de ul, pero me gustaría ser más específico. Me gustaría encontrar el enlace de anclaje exacto antes de eliminarlo junto con el li que contiene.
En el ejemplo a continuación, quiero eliminar solo Another link .
Mi código hasta ahora se parece a:
<ul class="working-list"> <li class="work color1"> <a href="?c=Some link 1"> <span class="title"> link 1</span> </a> </li> <li class="work color1"> <a href="?c=someLink2"><span class="title"> Some link 2</span> </a> </li> <li class="work color1"> <a href="?c=anotherLink"><span class="title"> Another link</span> </a> </li> <li class="work color1"> <a href="?c=SmallLink"><span class="title"> Small link</span> </a> </li> </ul>Y el guión hasta ahora:
let pickEl = document.querySelectorAll('.working-list li'); // let pickA = document.querySelector('a[href=\'?c=anotherLink\']'); console.log(pickEl); pickEl[3].remove();¿Cuál sería el mejor enfoque?
Puede intentar usar el selector de selectores de Attribute selectors :
let pickEl = document.querySelector('.working-list li a[href="?c=anotherLink"]'); console.log(pickEl); //remove the parent li pickEl.closest('li').remove(); <ul class="working-list"> <li class="work color1"> <a href="?c=Some link 1"> <span class="title">link 1</span> </a> </li> <li class="work color1"> <a href="?c=someLink2"> <span class="title">Some link 2</span> </a> </li> <li class="work color1"> <a href="?c=anotherLink"> <span class="title">Another link</span> </a> </li> <li class="work color1"> <a href="?c=SmallLink"> <span class="title">Small link</span> </a> </li> </ul>Puede forEach the pickEl y luego ver textContent como:
let pickEl = document.querySelectorAll('.working-list li'); const deleteText = 'Another link'; pickEl.forEach(el =>{ const a = el.querySelector('a'); if(a.textContent.trim() === deleteText){ el.remove(); } }); <ul class="working-list"> <li class="work color1"> <a href="?c=Some link 1"> <span class="title"> link 1</span> </a> </li> <li class="work color1"> <a href="?c=someLink2"><span class="title"> Some link 2</span> </a> </li> <li class="work color1"> <a href="?c=anotherLink"><span class="title"> Another link</span> </a> </li> <li class="work color1"> <a href="?c=SmallLink"><span class="title"> Small link</span> </a> </li> </ul>