Як очистити вміст div за допомогою JavaScript? [зачинено]

152

Коли користувач натискає кнопку на моїй сторінці, вміст div повинен бути очищений. Як би я міг досягти цього?

javascript html css

— Раджасекар
джерело

— Сценарій47

Відповіді:

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

@Tom Gullen: будь ласка, не враховуйте, що це не видаляє обробників подій, пов'язаних з вузлами всередині цього діла.

— bhavya_w

Відповідь @Mic приблизно на 250 разів швидше. 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

@Sukima цей спосіб швидше, ніж кращий відповідь, тому якщо вам потрібна краща продуктивність, а не короткий код, це ваш вибір.

— iiic

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

— Рассел Ельфенбейн