Как очистить содержимое div с помощью JavaScript? [закрыто]

152

Когда пользователь нажимает кнопку на моей странице, содержимое div должно быть очищено. Как бы я пошел для достижения этой цели?

javascript html css Rajasekar
источник

Этот вопрос обсуждается на мета.

Script47

Ответы:

270

Просто Javascript (по запросу)

Добавьте эту функцию где-нибудь на своей странице (желательно в <head>)

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

Затем добавьте кнопку на событие клика:

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

В JQuery (для справки)

Если вы предпочитаете JQuery, вы можете сделать:

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

Том Гуллен
источник

альтернативный jQuery:$("#cart_item").empty();

Роб Аллен

Не могли бы вы также использовать .detach ()?

RyanP13

@Tom Gullen это сработало для меня без передачи идентификатора DIV в функцию и с одинарными кавычками вокруг elementID в самой функции. Спасибо за это!

DPSSpatial

@ Том Гуллен: пожалуйста, не забывайте, что это не удаляет обработчики событий, связанные с узлами внутри этого div.

bhavya_w

@Mic ответ «s о 250X быстрее. jsperf.com/innerhtml-vs-removechild

tleb

108

Вы можете сделать это также DOM-способом:

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

микрофон
источник

На высшем уровне! То же, что и jQuery: $ ("# cart_item"). Empty (); действуя на DOM, а не только на содержание. Большой!

Педро Феррейра

Это предпочтительнее, innerHTML = ''и если да, то почему?

Суким

это чувствует себя чище, чем innerHTML = ''. Я бы лично написал лишнюю пару строк

dmo

@ Сукима, таким образом, быстрее, чем предпочтительный ответ, поэтому, если вам нужна лучшая производительность, чем короткий код, это ваш выбор.

как один лайнерwhile(div.firstChild && div.removeChild(div.firstChild));

Рассел Эльфенбейн