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

时间:2009-11-09 16:03:40

标签: javascript jquery html dom-manipulation

我有一个div <div id="masterdiv">,它有几个孩子<div>

示例:

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

如何使用jQuery清除主<div>内所有子<div>的内容?

14 个答案:

答案 0 :(得分:433)

jQuery的empty()函数就是这样做的:

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

清除主div

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

清除所有子div,但保持原封不动。

答案 1 :(得分:254)

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

答案 2 :(得分:19)

使用jQuery的CSS选择器语法选择标识为div的元素内的所有masterdiv元素。然后拨打empty()以清除内容。

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

使用text('')html('')将导致进行一些字符串解析,这在处理DOM时通常是个坏主意。尝试并使用不涉及DOM对象的字符串表示的DOM操作方法。

答案 3 :(得分:11)

更好的方法是:

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

答案 4 :(得分:10)

如果masterdiv中的所有div都需要清除,那就这样。

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

否则,你需要迭代#masterdiv的所有div子节点,并检查id是否以childdiv开头。

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

答案 5 :(得分:9)

jQuery建议您使用&#34; .empty()&#34;,&#34; .remove()&#34;,&#34; .detach()&#34;

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

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

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

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

i和jQuery组不推荐使用 SET FUNCTION ,如.html()。attr()。text(),这是什么?它如果您想要设置任何您需要的

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

答案 6 :(得分:6)

您可以使用.empty()函数清除所有子元素

 $(document).ready(function () {
  $("#button").click(function () {
   //only the content inside of the element will be deleted
   $("#masterdiv").empty();
  });
 });

要查看jquery .empty(),. hide(),. remove()和.detach()之间的比较,请点击此处http://www.voidtricks.com/jquery-empty-hide-remove-detach/

答案 7 :(得分:5)

$("#masterdiv div").text("");

答案 8 :(得分:5)

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

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

答案 9 :(得分:5)

我知道这是一个与jQuery相关的问题,但是我相信有人可能会期待纯Javascript的解决方案。因此,如果您尝试使用js进行此操作,则可以使用innerHTML属性并将其设置为空字符串。

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

答案 10 :(得分:4)

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

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

答案 11 :(得分:4)

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

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

正常工作以删除div中的内容

答案 12 :(得分:4)

当你使用任何服务或数据库通过id将数据附加到div时,首先尝试将其空,如下所示:

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

答案 13 :(得分:0)

尝试帮助他们。

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

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