Como limpo o conteúdo de uma div usando JavaScript? [fechadas]

152

Quando o usuário clica em um botão na minha página, o conteúdo de uma div deve ser limpo. Como eu realizaria isso?

javascript html css

— Rajasekar
fonte

Esta questão está sendo discutida no meta.

— Script47

Respostas:

270

Apenas Javascript (conforme solicitado)

Adicione esta função em algum lugar da sua página (de preferência no <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Em seguida, adicione o botão no evento de clique:

<button onclick="clearBox('cart_item')" />

No JQuery (para referência)

Se você preferir o JQuery, poderá fazer:

$("#cart_item").html("");

— Tom Gullen
fonte

jQuery alternativo:$("#cart_item").empty();

— Rob Allen

Você poderia usar .detach () também?

— RyanP13

@ Tom Gullen isso funcionou para mim sem passar o ID do DIV para a função e com aspas simples ao redor do elementID na própria função. Obrigado por isso!

— precisa saber é o seguinte

@ Tom Gullen: por favor, não remova os manipuladores de eventos associados aos nós dentro dessa div.

— precisa saber é o seguinte

A resposta da @Mic é cerca de 250x mais rápida. jsperf.com/innerhtml-vs-removechild

— tleb 24/10/16

108

Você pode fazer isso da maneira DOM também:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

— Microfone
fonte

Top de linha! O mesmo que jQuery: $ ("# cart_item"). Empty (); atuando no DOM e não apenas no conteúdo. Ótimo!

— Pedro Ferreira

Isso é preferido innerHTML = ''e, em caso afirmativo, por quê?

— Sukima 23/05

isso parece mais limpo do que innerHTML = ''. Eu pessoalmente escrever o casal extra de linhas

— DMO

O @Sukima dessa forma é mais rápido do que a resposta preferida; portanto, se você precisar de melhor desempenho, em vez de código curto, é a sua escolha.

— iiic

como um forrowhile(div.firstChild && div.removeChild(div.firstChild));

— Russell Elfenbein