Подтвердить что ты не робот

Как удалить дочерний элемент node в HTML с помощью JavaScript?

Есть ли функция типа document.getElementById("FirstDiv").clear()?

4b9b3361

Ответ 1

Чтобы ответить на исходный вопрос - существуют различные способы сделать это, но следующее будет самым простым.

Если у вас уже есть дескриптор дочернего элемента node, который вы хотите удалить, т.е. у вас есть переменная JavaScript, содержащая ссылку на нее:

myChildNode.parentNode.removeChild(myChildNode);

Очевидно, что если вы не используете одну из многочисленных библиотек, которые уже делают это, вам нужно создать функцию, чтобы абстрагировать это:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

EDIT: Как уже упоминалось другими: если у вас есть обработчики событий, подключенные к node, которые вы удаляете, вам нужно будет отключить их до того, как будет удалена последняя ссылка на node вне сферы действия, чтобы не было плохих реализаций утечки памяти интерпретатора JavaScript.

Ответ 2

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

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Ответ 3

Вы должны удалить все обработчики событий, которые вы установили на node, прежде чем удалить его, чтобы избежать утечек памяти в IE

Ответ 4

Решение jQuery

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Javascript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

Литература:

Селектор выбора атрибута [имя = значение]

Выбор элементов, имеющих указанный атрибут со значением точно равное определенному значению.

Child Selector ( "parent > child" )

Выбирает все прямые дочерние элементы заданный "дочерним" элементом указанный "родителем"

. remove()

Аналогично .empty(),.remove() метод выводит элементы из DOM. Мы используем .remove(), когда хотим удалите сам элемент, а также все внутри. В дополнении к сами элементы, все связанные события и данные jQuery, связанные с элементы удаляются.

Ответ 5

targetNode.remove()

Это рекомендуется W3C по состоянию на конец 2015 года и vanilla JS. Лучше/чище, чем предыдущий метод.

В вашем случае использования:

document.getElementById("FirstDiv").remove();

Если вам нужна polyfill, чтобы обеспечить обратную совместимость:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Ответ 6

Используйте следующий код:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

Ответ 7

Вы должны использовать метод .RemoveNode метода node или .RemoveChild для родительского node.

Ответ 8

Вероятно, вы должны использовать библиотеку JavaScript, чтобы делать такие вещи.

Например, MochiKit имеет функцию removeElement, а jQuery имеет remove.

Ответ 9

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p является родительским node и c является дочерним node
parentNode - это переменная JavaScript, содержащая родительскую ссылку

Легко понять