如何清除父<div>中所有<div>的内容?


219

我有一个<div id="masterdiv">有几个孩子<div>的div 。

例:

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

如何使用jQuery 清除<div>master内所有child 的内容<div>


6
我重新标记了您的问题,因为它与任何形式或形式的Asp.net MVC(如您所标记的)都不相关。
罗伯特·科里特尼克

考虑接受使用的答案.empty()。它是做最高效的方式
科罗布峡谷

Answers:


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

我们可以克隆html并对其进行操作吗?像var tmp = $('<div>')。append($('#masterdiv')。clone())。remove()。html(); 并获得内部TMP的#masterdiv的div和清除的内容,并返回
普拉萨德

118
使用.empty()将是更好的选择,因为不涉及字符串解析。它直接在DOM对象模型上运行。
德鲁·诺阿克斯

7
empty()还清除使用jQuery生成的所有内容。
MikkoP 2014年

445

jQuery的empty()功能就是这样:

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

清除主人div

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

清除所有子项div,但保留主项不变。


8
api.jquery.com/empty这是真的,但我不知道为什么昆汀回答被接受:)
Nuri

5
这比原来的问题要清楚的多-您应该使用更具体的选择器
德鲁·诺阿克斯

4
哇,谢谢Drew在1.5年后指出了这一点:)已修复。
埃米尔·伊凡诺夫

20

使用jQuery的CSS选择器语法选择divID为的元素内的所有元素masterdiv。然后调用empty()以清除内容。

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

使用text('')html('')将引起一些字符串解析,这在使用DOM时通常是一个坏主意。尝试并尽可能使用不涉及DOM对象的字符串表示形式的DOM操作方法。


14

jQuery建议您使用“ .empty()”,“。remove()”,“。detach()”

如果您需要删除element中的所有元素,请使用以下代码:

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

如果需要删除所有元素,请使用以下代码:

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

我和jQuery组不建议使用.html().attr().text()之类的SET FUNCTION,那是什么?它如果你想设置你需要什么

参考: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”的类元素,而不是id为“ masterdiv”的元素-仅作注释。
戴夫


6
$("#masterdiv > *").text("")

要么

$("#masterdiv").children().text("")

6
$('#div_id').empty();

要么

$('.div_class').empty();

可以正常删除div中的内容


3
埃米尔·伊万诺夫(Emil Ivanov)的答案重复。
Adrian Enriquez


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
这是Google搜索空div时的最高结果。谢谢!
PRID

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.