Como limpar todo o conteúdo de <div> s dentro de um pai <div>?


219

Eu tenho uma div <div id="masterdiv">que tem vários filhos <div>.

Exemplo:

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

Como limpar o conteúdo de todos os filhos <div>dentro do mestre <div>usando jQuery?


6
Marquei novamente sua pergunta porque ela não está relacionada ao Asp.net MVC (como você a marcou) de qualquer forma ou formato.
9269 Robert Koritnik

Considere aceitar uma resposta que use .empty(). É a maneira mais eficiente de fazer isso #
Kolob Canyon

Respostas:


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

Podemos clonar o html e manipular isso? Como var tmp = $ ('<div>') .append ($ ('# masterdiv'). clone ()). remove (). html (); e obter os divs dentro #masterdiv de tmp e limpar o conteúdo e voltar
Prasad

118
Usar .empty()seria uma opção melhor, pois nenhuma análise de string está envolvida. Opera diretamente no modelo de objeto DOM.
de Drew Noakes

7
empty()também limpa todo o conteúdo gerado com o jQuery.
11556 MikkoP #

445

A empty()função do jQuery faz exatamente isso:

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

limpa o mestre div.

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

limpa todas as crianças div, mas deixa o mestre intacto.


8
api.jquery.com/empty é verdade, mas eu não sei porque Quentin resposta aceita :)
Nuri YILMAZ

5
Isso limpa mais do que o solicitado na pergunta original - você deve usar um seletor mais específico .
de Drew Noakes

4
Uau, obrigado Drew por apontar isso 1,5 anos depois :) Corrigido.
Emil Ivanov

20

Use a sintaxe do seletor CSS do jQuery para selecionar todos os divelementos dentro do elemento com id masterdiv. Em seguida, ligue empty()para limpar o conteúdo.

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

O uso text('')ou html('')causará a análise de algumas strings, o que geralmente é uma má ideia ao trabalhar com o DOM. Tente usar métodos de manipulação de DOM que não envolvam representações de seqüência de caracteres de objetos DOM sempre que possível.


14

O jQuery recomenda que você use ".empty ()", ". remove ()", ". detach ()"

se você precisar excluir todos os elementos do elemento, use este código:

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

se você precisar excluir todos os elementos, use este código:

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

eu e o grupo jQuery não recomendamos o uso de SET FUNCTION como .html () .attr () .text (), o que é isso? É SE VOCÊ QUER AJUSTAR QUALQUER COISA QUE VOCÊ PRECISA

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


12

Se todas as divs dentro desse masterdiv precisarem ser limpas, é isso.

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

caso contrário, você precisará iterar todos os filhos div de #masterdiv e verificar se o ID começa com childdiv.

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

11

A melhor maneira é:

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

1
Isso seleciona todos os elementos com a classe "masterdiv", não o id "masterdiv", conforme as perguntas - apenas uma observação.
Dave


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

ou

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

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

ou

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

Funciona bem para remover o conteúdo de uma div


3
Duplicata da resposta de Emil Ivanov.
Adrian Enriquez

6

Você pode usar a função .empty () para limpar todos os elementos filho

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

Para ver a comparação entre jquery .empty (), .hide (), .remove () e .detach (), siga aqui http://www.voidtricks.com/jquery-empty-hide-remove-detach/


5

Quando você estiver anexando dados ao div por id usando qualquer serviço ou banco de dados, tente primeiro vazio, da seguinte maneira:

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

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

ou

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

3

Sei que essa é uma jQuerypergunta relacionada, mas acredito que alguém possa chegar aqui esperando uma Javascriptsolução pura . Portanto, se você estava tentando fazer isso usando js, poderia usar a innerHTMLpropriedade e configurá-la como uma sequência vazia.

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

1
esse foi o principal resultado no Google ao pesquisar como esvaziar uma div. Obrigado!
Prid 18/04

0

experimente-os se ajudar.

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

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


porque "-1". Eu só estava tentando ajudar?
Gaurav Kaushik
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.