removeChild()

Поддержка браузерами

Описание

Метод removeChild() удаляет указанный дочерний узел из родительского элемента.

Удалённый дочерний узел остаётся записанным в оперативной памяти, но более не является частью DOM. Так как метод возвращает удалённый дочерний узел, его можно сохранить к примеру в переменной, чтобы, если необходимо, к нему можно было бы обратиться позднее в коде.

Чтобы вставить удаленный узел в другое место в документе можно воспользоваться методом insertBefore() или appendChild().

Синтаксис

element.removeChild(дочернийУзел);

element - родительский элемент дочернего узла.

Аргументы

дочернийУзел: узел, который будет удалён из DOM.

Возвращаемое значение

Удалённый дочернийУзел.
null: если дочерний узел не существует.

Пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
</head>
<body>

  <p>Нажмите одну из кнопок, чтобы добавить или удалить последний пункт списка.</p>

  <button onclick="bar()">Добавить</button>
  <button onclick="foo()">Удалить</button>

  <ul id="list1"><li>Кофе</li><li>Чай</li></ul>

  <script>
    var i = 1;

    function foo() {
      var elem = document.getElementById("list1").lastChild;
      elem.parentNode.removeChild(elem);
    }

    function bar() {
      var elem = document.createElement("li");
      elem.innerHTML = "Water" + i;
      document.getElementById("list1").appendChild(elem);
      i++;
    }
  </script>

</body>
</html>

Попробовать »