1

JavaScript を使用してタグ名で要素を削除しようとしています。「クリア」というボタンのクリックハンドラを設定しました。関数 clear 関数を使用して、リストからすべての li 要素を削除しようとしています。これは私がこれまでに持っているものです:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (k = list.length; k >= 0; k++) {
    var parent = list.parentNode;
    parent.removeChild(list[k]);
  }
}

「test」は、HTML にある ul 要素の名前です。親が定義されていないというメッセージがコンソールに表示されます。li 要素を削除できるようにコードを変更する方法について何か提案はありますか?

4

5 に答える 5

3

問題は、あなたが開始しlist.lengthて増加していることにあるようですwhile k >= 0。無限ループ。

それとは別に、を使用する必要があり、list[k].parentNode宣言していないkため、次のようになります。

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length - 1; k >= 0; k--) {
    var item = list[k];
    item.parentNode.removeChild(item);
  }
}
于 2013-03-08T18:47:39.807 に答える
0

によって返されるNodeListはgetElementsByTagName、 （通常）ライブ（動的）です。これは、ノードが削除されるにつれて長さが短くなることを意味します。したがって、ループでこれを考慮する必要があります。
これを回避する方法の例をいくつか示します。

function clear() {
    var nodes = document.getElementById("test").getElementsByTagName("li"),
        i = nodes.length; // one var statement at beginning
    // Choose one of
    while (i--) { // same as `i-->0`
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // OR
    while (nodes.length) { // same as `nodes.length>0`, okay as dynamic list
        nodes[0].parentNode.removeChild(nodes[0]); // remove nodes from start
    }
    // OR
    for (; i >= 0; --i) {
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // etc
}
于 2013-03-08T19:12:40.700 に答える
0

HTML： 

<ul id="test" type="bullet">
    <li>apple</li>
    <li>Orange</li>
</ul>

<button onclick="Clearall()">Click me</button>

ULタグにタグのみが含まれている場合は、以下のLIようにしてみてください...それはあなたを助けます。

function Clearall()
{
 document.getElementById("test").innerHTML="";
}

ULタグにタグと他のタグが含まれている場合は、LI以下のようにしてみてください。

Javascript：

function Clearall()
{
  var ul = document.getElementById("test");
  var lis = ul.getElementsByTagName("li");
  while(lis.length > 0)
  {
   ul.removeChild(lis[lis.length - 1]);
  }
}
于 2013-03-08T19:23:48.843 に答える
0

次のように一般化できます。

function clear(list) {
  for (var i = list.length, li; li = list[--i];)
    li.parentNode.removeChild(li);
}

clear(document.getElementById("test").getElementsByTagName("li"));

あなたの主なエラーはk++代わりにk--、list.parentNode代わりにlist[k].parentNode–listは NodeList であり、親がありません。リストの各要素は異なる親を持つことができます。

于 2013-03-08T19:03:30.687 に答える
0

ほぼそこに、2 つの小さなエラーがあります。

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length; k-- > 0; ) { // decrement from list.length-1 to 0
    var parent = list[k].parentNode; // you need the parent of the item, not the list
    parent.removeChild(list[k]);
  }
}

逆の順序では動的ノードリストの一部の項目をスキップするため、インクリメントではなくデクリメントを行うことに注意してください。

于 2013-03-08T18:47:50.110 に答える