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

Question

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

例:

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

如何使用jQuery 清除<div>master 中所有子<div>进程的内容？

Answer 1

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

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

清除主人div.

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

清除所有孩子div,但让主人完好无损.

Answer 2

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

Answer 3

使用jQuery的CSS选择器语法选择div具有id的元素内的所有元素masterdiv.然后打电话empty()清除内容.

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

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

Answer 4

jQuery建议您使用".empty()",".remove()",".detach()"

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

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

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

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

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

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

Answer 5

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

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

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

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

Answer 6

更好的方法是:

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

Answer 7

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

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

Answer 8

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

Answer 9

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

要么

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

Answer 10

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

Answer 11

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

要么

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

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

Answer 12

使用任何服务或数据库将数据按ID附加到div中时，请先将其尝试为空，如下所示：

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