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

StackOverflow https://stackoverflow.com/questions/13763

  •  08-06-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

編集：他の人も述べているように:削除するノードにイベント ハンドラが接続されている場合は、JavaScript インタプリタの実装が不十分でメモリ リークが発生しないように、削除するノードへの最後の参照がスコープ外になる前にそれらのハンドラを必ず切断する必要があります。

他のヒント

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

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

targetNode.remove()

これは 2015 年後半の時点で W3C によって推奨されており、 バニラJS. 。以前の方法よりもはるかに優れ/クリーンです。

あなたのユースケースの場合:

document.getElementById("FirstDiv").remove();

下位互換性を確保するためにポリフィルが必要な場合は、次のようにします。

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Mozilla ドキュメント

サポートされているブラウザ - 92% 2018 年 3 月

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

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();

参考文献:

属性が等しいセレクター [名前=値]

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

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

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

。取り除く（）

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

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

//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.

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p は親ノード、c は子ノードです
parentNode は、親参照を含む JavaScript 変数です。

わかりやすい

ノードの .RemoveNode メソッドまたは親ノードの .RemoveChild メソッドを使用できる必要があります。

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

たとえば、MochiKitには次のような機能があります 要素の削除, 、jQuery には 取り除く.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top