web-dev-qa-db-ja.com

javascriptはulを削除せずにliを削除しますか？

Ulを削除せずにulのli要素を削除する方法はありますか？これしか見つけられないようです。

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

しかし、これはulを削除します。私はli要素を削除するたびにulをcreateElement ulする必要なく、その場でli要素を削除して追加できることを望んでいます。より単純な方法を探しています。助けてくれてありがとう。

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

このようなことができます。

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

JQueryを使用している場合

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

これらの両方は、リスト内のすべてを削除します。

19
Justin Wood

これでうまくいくはずです：

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

デモ http://jsfiddle.net/krasimir/UhhuX/

13
Krasimir

ulを削除しているのは、element変数がulを指しているためです。次に、次のコード行が親（#listView）に移動し、removechild変数（element要素を指す）が渡されたulメソッドを適用しますそれに。

すべてのli要素を削除する必要がある場合は、次を使用できます。

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

ulを完全に空にします。選択したli要素を削除する必要がある場合は、次のように#myListから特定の子要素に移動できます。

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

ulElem.removeChild(ulElem.childNodes[i])

ここで、iは、削除するliのインデックスです（1番目は0、2番目は1など）。

参照： https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild

7
Ben Jackson

最初の子がいる限り、それを削除します。 （メンバーが1人でもいる限り）。

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