JavaScriptを使用してdivのコンテンツをクリアするにはどうすればよいですか？[閉まっている]

152

ユーザーが自分のページのボタンをクリックすると、divのコンテンツがクリアされます。これを達成するにはどうすればよいですか？

javascript html css

— ラジャセカール
ソース

— Script47

回答:

270

Javascriptのみ（要求に応じて）

この関数をページのどこかに追加します（できれば<head>）

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

次に、クリックイベント時にボタンを追加します。

<button onclick="clearBox('cart_item')" />

JQuery（参照用）

あなたがjQueryを好むなら、あなたはそうすることができます：

$("#cart_item").html("");

— トム・グレン
ソース

代替jQuery：$("#cart_item").empty();

— Rob Allen

.detach（）も使用できますか？

— RyanP13 2010

@Tom Gullenこれは、DIVのIDを関数に渡さずに、関数自体のelementIDを単一引用符で囲んで、私にとってはうまくいきました。これをありがとう！

— DPSSpatial 2014

@Tom Gullen：これはそのdiv内のノードに関連付けられたイベントハンドラーを削除しないことに注意してください。

— bhavya_w 2014

@Micの答えは約250倍速くなります。jsperf.com/innerhtml-vs-removechild

— tleb

108

あなたはそれをDOMの方法でも行うことができます：

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

— マイク
ソース

一流！jQueryと同じ：$（ "＃cart_item"）。empty（）; コンテンツだけでなくDOMにも作用します。すごい！

— ペドロフェレイラ

これは優先されinnerHTML = ''ますか、そうであればなぜですか？

— スキマスイッチ

これはよりきれいに感じinnerHTML = ''ます。私は個人的にラインの余分なカップルを書くでしょう

— DMO

@Sukimaはこの方法が推奨される回答よりも高速であるため、短いコードではなくより良いパフォーマンスが必要な場合は、これを選択します。

— iiic

ワンライナーとしてwhile(div.firstChild && div.removeChild(div.firstChild));

— ラッセルエルフェンバイン