如何清除父 <div> 中所有 <div> 的内容？答案

【问题标题】：How to clear all <div>s’ contents inside a parent <div>?如何清除父 <div> 中所有 <div> 的内容？
【发布时间】：2010-12-14 16:34:30
【问题描述】：

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

例子：

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

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

【问题讨论】：

我重新标记了您的问题，因为它与 Asp.net MVC（正如您已标记的那样）以任何方式或形式无关。
考虑接受使用.empty() 的答案。这是最高效的方法

标签： javascript jquery html dom-manipulation

【解决方案1】：

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

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

清除主控div。

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

清除所有子divs，但保持原样。

【讨论】：

api.jquery.com/empty 这是真的，但我不知道为什么昆汀的回答被接受:)
这比原始问题中的要求更清楚——您应该使用更多specific selector。
哇，感谢 Drew 在 1.5 年后指出这一点 :) 已修复。

【解决方案2】：

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

【讨论】：

我们可以克隆 html 并对其进行操作吗？比如 var tmp = $('
').append($('#masterdiv').clone()).remove().html();并获取 tmp 的#masterdiv 中的 div 并清除内容并返回
使用.empty() 会是更好的选择，因为不涉及字符串解析。它直接对 DOM 对象模型进行操作。
empty() 还会清除所有使用 jQuery 生成的内容。

【解决方案3】：

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

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

使用text('') 或html('') 会导致一些字符串解析发生，这在使用DOM 时通常是个坏主意。尽可能尝试使用不涉及 DOM 对象的字符串表示的 DOM 操作方法。

【讨论】：

【解决方案4】：

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

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

【讨论】：

这是在 Google 上搜索如何清空 div 时的最高结果。谢谢！

【解决方案5】：

jQuery 推荐你使用 ".empty()",".remove()",".detach()"

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

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

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

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

i 和 jQuery 组不推荐使用 SET FUNCTION 像 .html() .attr() .text() ，那是什么？ 如果你想设置任何你需要的东西

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

【讨论】：

【解决方案6】：

如果masterdiv里面的所有div都需要清空，就这个。

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

否则，您需要遍历#masterdiv的所有div子元素，并检查id是否以childdiv开头。

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

【讨论】：

【解决方案7】：

更好的方法是：

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

【讨论】：

这会根据问题选择所有具有“masterdiv”类而不是 id“masterdiv”的元素 - 只是一个注释。

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

或

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

【讨论】：

【解决方案10】：

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

或

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

可以很好地删除 div 内的内容

【讨论】：

埃米尔·伊万诺夫的回答重复。

【解决方案11】：

您可以使用 .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/

【讨论】：

【解决方案12】：

当您使用任何服务或数据库通过 id 将数据附加到 div 中时，首先尝试将其清空，如下所示：

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

【讨论】：

【解决方案13】：

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

或

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

【讨论】：

【解决方案14】：

如果有帮助，请尝试。

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

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

【讨论】：

为什么是“-1”。我只是想帮忙？