Как очистить содержимое div

Ответ 1

Если ваш div выглядит так:

<div id="MyDiv">content in here</div>

Затем этот Javascript:

document.getElementById("MyDiv").innerHTML = "";

будет выглядеть так:

<div id="MyDiv"></div>

Ответ 2

Если вы используете jQuery...

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

или

$('div').empty();

Ответ 3

Если, сказав, не уничтожив его, вы хотите сохранить ссылку на детей, вы можете сделать:

var oldChildren = [];

while(element.hasChildNodes()) {
    oldChildren.push(element.removeChild(element.firstChild));
}

Относительно оригинальной маркировки (html css) вашего вопроса:

Вы не можете удалить содержимое с помощью CSS. Вы могли только скрыть это. Например. вы можете скрыть всех детей определенного node с помощью:

#someID > * {
    display: none;
}

Это не работает в IE6 (но вы можете использовать #someID *).

Ответ 4

Альтернативный способ сделать это:

var div = document.getElementById('myDiv');
while(div.firstChild)
    div.removeChild(div.firstChild);

Однако, используя document.getElementById('myDiv').innerHTML = ""; быстрее.

Смотри: контрольный тест

NB

Оба метода сохраняют div.

Ответ 5

В jQuery это будет так же просто, как $('#yourDivID').empty()

См. документацию .

Ответ 6

Этот метод работает лучше всего для меня:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

Чтобы использовать его, мы можем развернуть его так:

document.getElementsByID('DIV_Id').remove();

или же

document.getElementsByClassName('DIV_Class').remove();

Ответ 7

Вы можете .remove() каждый ребенок:

const div = document.querySelector('div.my-div')
while(div.firstChild) div.firstChild.remove()