226

我有一个 div<div id="masterdiv">有几个 child <div>。

例子：

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

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

4

14 回答 14

459

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

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

清除主人div。

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

清除所有 child div，但保持 master 完好无损。

于 2009-11-09T16:11:39.253 回答
276 
jQuery('#masterdiv div').html('');
于 2009-11-09T16:05:28.603 回答
23

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

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

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

于 2010-08-22T19:45:56.450 回答
14

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

document.getElementById('masterdiv').innerHTML = '';
于 2020-02-29T14:28:41.880 回答
13

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

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

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

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

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

我和 jQuery 组不建议使用.html() .attr() .text() 之类的SET FUNCTION，那是什么？如果你想设置你需要的任何东西

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

于 2017-03-20T04:17:49.820 回答
12

如果需要清除该 masterdiv 中的所有 div，则为 this。

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

否则，您需要迭代 #masterdiv 的所有 div 子级，并检查 id 是否以 childdiv 开头。

$('#masterdiv div').each(
    function(element){
        if(element.attr('id').substr(0, 8) == "childdiv")
        {
            element.html('');
        }
    }
 );
于 2009-11-09T16:06:28.530 回答
11

更好的方法是： 

 $( ".masterdiv" ).empty();
于 2014-08-13T11:06:57.087 回答
7 
$("#masterdiv div").text("");
于 2009-11-09T16:05:25.460 回答
6 
$("#masterdiv > *").text("")

或者

$("#masterdiv").children().text("")
于 2009-11-09T16:07:20.573 回答
6 
$('#div_id').empty();

或者

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

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

于 2015-02-19T07:24:46.000 回答
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/

于 2015-10-02T03:43:32.397 回答
5

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

var json = jsonParse(data.d);
$('#divname').empty();
于 2017-05-10T05:51:48.377 回答
4 
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});

或者

$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
于 2009-11-09T16:23:49.823 回答
0

如果有帮助，请尝试它们。

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

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

于 2019-04-13T09:58:19.433 回答