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
50
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
3
@ 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
1
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
1
isso parece mais limpo do que innerHTML = ''. Eu pessoalmente escrever o casal extra de linhas
DMO
1
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
1
como um forrowhile(div.firstChild && div.removeChild(div.firstChild));
Russell Elfenbein