親<div>内のすべての<div>のコンテンツをクリアする方法は?


219

<div id="masterdiv">いくつかの子を持つdivがあります<div>

例:

<div id="masterdiv">
  <div id="childdiv1" />
  <div id="childdiv2" />
  <div id="childdiv3" />
</div>

jQueryを使用し<div>てマスター内のすべての子のコンテンツをクリアする方法は<div>


6
私はあなたの質問にタグを付け直しました。なぜなら、それは(あなたがそれに付けたように)Asp.net MVCとは何らかの形や形で関係していないからです。
Robert Koritnik 2009年

を使用する回答を受け入れることを検討してください.empty()。それが最もパフォーマンスの高い方法です
Kolob Canyon

回答:


270
jQuery('#masterdiv div').html('');

HTMLを複製して操作できますか?var tmp = $( '<div>')。append($( '#masterdiv')。clone())。remove()。html();のように そしてtmpの#masterdiv内のdivを取得し、内容をクリアして戻ります
Prasad

118
.empty()文字列の解析は行われないため、使用する方が良いオプションです。DOMオブジェクトモデルを直接操作します。
Drew Noakes、2010

7
empty()また、jQueryで生成されたすべてのコンテンツをクリアします。
MikkoP 14

445

jQueryのempty()関数はまさにそれを行います:

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

マスターをクリアしますdiv

$('#masterdiv div').empty();

すべての子をクリアしますdivが、マスターはそのままにします。


8
api.jquery.com/emptyそれは本当ですが、なぜQuentinの回答が受け入れられたのかわかりません:)
Nuri YILMAZ

5
これにより、元の質問で求められていた以上のことが明らかになります。より具体的なセレクターを使用する必要があります。
Drew Noakes、2011

4
うわー、1.5年後にこれを指摘してくれたDrewに感謝します:)修正されました。
エミールイワノフ2011

20

jQueryのCSSセレクター構文を使用divして、idを持つ要素内のすべての要素を選択しますmasterdiv。次にを呼び出しempty()て内容をクリアします。

$('#masterdiv div').empty();

text('')またはhtml('')を使用すると、一部の文字列解析が行われますが、これは一般に、DOMを操作する場合にはお勧めできません。可能な限り、DOMオブジェクトの文字列表現を含まないDOM操作メソッドを試してください。


14

jQueryでは、「。empty()」、「。remove()」、「。detach()」の使用をお勧めします

要素内のすべての要素を削除する必要がある場合は、次のコードを使用します。

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

すべての要素を削除する必要がある場合は、次のコードを使用します。

$('#target_id').remove();

iおよびjQueryグループは、.html().attr().text()のようなSET FUNCTIONの使用を推奨していませんが、それは何ですか?必要なものをすべて設定したい場合

ref:https : //learn.jquery.com/using-jquery-core/manipulating-elements/


12

そのmasterdiv内のすべてのdivをクリアする必要がある場合は、これです。

$('#masterdiv div').html('');

それ以外の場合は、#masterdivのすべてのdiv子を反復処理し、IDがchilddivで始まるかどうかを確認する必要があります。

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );

11

より良い方法は:

 $( ".masterdiv" ).empty();

1
これにより、質問に従って、「masterdiv」ではなく「masterdiv」クラスのすべての要素が選択されます。
Dave、





5

サービスまたはデータベースを使用して、IDでデータをdivに追加する場合は、まず次のように空にしてみます。

var json = jsonParse(data.d);
$('#divname').empty();

4
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

または

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});

3

これはjQuery関連する質問であることは知っていますが、純粋なJavascript解決策を期待してここに来る人がいるかもしれません。そのため、を使用してこれを実行しようとしたjs場合、innerHTMLプロパティを使用して空の文字列に設定できます。

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

1
これは、divを空にする方法を検索したときのGoogleのトップの結果でした。ありがとうございました!
PRID

0

それが役立つならそれらを試してください。

$('.div_parent .div_child').empty();

$('#div_parent #div_child').empty();


なぜ「-1」なのか。私は助けようとしただけですか?
Gaurav Kaushik
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.