如何清空父<div>元素内所有子<div>元素的内容？

Question

我有一个

主div

，它有几个子

元素。

例子：

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

用jQuery如何清空母级<div>中所有子级<div>的内容？

- Prasad

---

我重新为你的问题打了标签，因为它与你所打的"Asp.net MVC"标签毫无关系。我的意思是你打错了标签。 - Robert Koritnik

考虑接受使用.empty()的答案。这是最高效的方法。 - Kellen Stuart

Answer 1

jQuery的empty()函数就是为此而生：

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

清空主要的div。

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

清除所有子元素为 div 的内容，但保留主要元素。

- Emil Ivanov

---

这个网页是jQuery文档中empty()方法的页面。虽然这个答案是正确的，但我不知道为什么Quentin被接受了。 - Nuri YILMAZ

这超出了原问题的要求，你应该使用更具体的选择器来清除内容。请参考链接：https://dev59.com/-nI-5IYBdhLWcg3wu7Hv#3543068 - Drew Noakes

哇，感谢你德鲁在1.5年后指出这个问题 :) 已修复。 - Emil Ivanov

Answer 2

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

- Quentin

---

我们能够克隆HTML并在其上进行操作吗？ 例如：var tmp = $('<div>').append($('#masterdiv').clone()).remove().html(); 然后获取tmp中#masterdiv内部的div，清除内容并返回。 - Prasad

使用.empty()比起字符串解析更好，因为它直接操作DOM对象模型。 - Drew Noakes

empty() 也清除了由 jQuery 生成的所有内容。 - MikkoP

Answer 3

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

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

当使用 text('') 或 html('') 方法时，会导致一些字符串解析的操作，通常在处理DOM时这是不好的做法。尽量使用不涉及DOM对象字符串表示的DOM操作方法。

- Drew Noakes

Answer 4

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

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

- Alain Cruz

---

在谷歌搜索如何清空一个 div 的时候，这是排名最靠前的结果。谢谢！ - Prid

Answer 5

jQuery建议您使用“.empty()”、“.remove()”和“.detach()”

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

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

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

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

jQeury团队不建议使用像.html()、.attr()、.text()这样的SET函数，什么意思呢？就是如果您想要设置任何内容，您需要……

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

- Abdul Aziz Al Basyir

Answer 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('');
        }
    }
 );

- Ikke

Answer 7

更好的方法是：

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

- Joe Mike

---

这会选择所有类名为"masterdiv"的元素，而不是id为"masterdiv"的元素，仅供参考。 - Dave

Answer 8

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

- brendan

Answer 9

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

- Anand Roshan

Answer 10

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

或者

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

- ase