javascript - JavaScriptを使用してHTMLの子ノードを削除するにはどうすればよいですか？

Question

のような機能はありdocument.getElementById("FirstDiv").clear()ますか？

Answer 1

元の質問に答えるには、これを行うにはさまざまな方法がありますが、次の方法が最も簡単です。

削除したい子ノードへのハンドルがすでにある場合、つまり、それへの参照を保持する JavaScript 変数がある場合:

myChildNode.parentNode.removeChild(myChildNode);

明らかに、すでにこれを行っている多数のライブラリのいずれかを使用していない場合は、これを抽象化する関数を作成する必要があります。

function removeElement(node) {
    node.parentNode.removeChild(node);
}

---

編集: 他の人が述べたように: 削除するノードに接続されているイベント ハンドラーがある場合は、削除するノードへの最後の参照が範囲外になる前に、それらを確実に切断する必要があります。 JavaScript インタープリターのメモリ リーク。

Answer 2

divをクリアしてすべての子ノードを削除する場合は、次のように入力できます。

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Answer 3

IEでのメモリリークを回避するために、ノードを削除する前に、ノードに設定したイベントハンドラーを削除する必要があります。

Answer 4

jQuery ソリューション

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Javascript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

参考文献:

属性が等しいセレクタ [name=value]

特定の値と正確に等しい値を持つ指定された属性を持つ要素を選択します。

子セレクター (「親 > 子」)

「親」で指定された要素の「子」で指定されたすべての直接の子要素を選択します

。削除する（）

.empty() と同様に、.remove() メソッドは DOM から要素を取り出します。要素自体とその中のすべてを削除する場合は、.remove() を使用します。要素自体に加えて、要素に関連付けられたすべてのバインドされたイベントと jQuery データが削除されます。

Answer 5

次のコードを使用します。

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

Answer 6

ノードの.RemoveNodeメソッドまたは親ノードの.RemoveChildメソッドを使用できるはずです。

Answer 7

このようなことを行うには、おそらくJavaScriptライブラリを使用する必要があります。

たとえば、MochiKitには関数removeElementがあり、jQueryにはremoveがあります。