web-dev-qa-db-fra.com

javascript supprimer li sans supprimer ul?

Existe-t-il un moyen de supprimer les éléments li d’un ul sans en supprimer également? Je ne peux que sembler trouver ceci.

var element = document.getElementById('myList');
element.parentNode.removeChild(element);

Mais, cela supprime le ul. J'espère pouvoir supprimer et ajouter des éléments li à la volée sans avoir à créer Elément de base ul chaque fois que je supprime des éléments li. Je cherche juste un moyen plus simple. Merci pour toute aide.

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>
javascripthtml-listsremovechild
10
MAZUMA

Vous pouvez faire quelque chose comme ça.

var myList = document.getElementById('myList');
myList.innerHTML = '';

Si vous utilisez jQuery

$('#myList').empty();

Tous les deux vont supprimer TOUT dans la liste.

13
Justin Wood

Cela devrait faire l'affaire:

var lis = document.querySelectorAll('#myList li');
for(var i=0; li=lis[i]; i++) {
    li.parentNode.removeChild(li);
}

Démo http://jsfiddle.net/krasimir/UhhuX/

9
Krasimir

La raison pour laquelle il supprime le ul est que vous avez la variable element qui pointe vers le ul. Votre ligne de code suivante passe ensuite au parent (#listView) et applique la méthode removechild à la variable element (qui pointe vers l'élément ul) qui lui est transmise.

Si vous devez supprimer tous les éléments li, vous pouvez utiliser:

document.getElementById('myList').innerHTML = '';

ce qui videra le ul complètement. Si vous devez supprimer des éléments li sélectionnés, vous pouvez passer du #myList aux éléments enfants particuliers en utilisant l'une des méthodes suivantes:

var ulElem = document.getElementById('myList');

ulElem.removeChild(ulElem.childNodes[i])

où i est l'index du li que vous voulez supprimer (0 pour 1er, 1 pour 2e, etc.)

Pour référence: https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild

4
Ben Jackson

Tant que nous avons un premier enfant, supprimez-le. (qui sera aussi longtemps que nous avons même un membre).

  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };
0
lironn