¿Cómo puedo eliminar un nodo secundario en HTML usando JavaScript?

Question

¿Existe una función como document.getElementById("FirstDiv").clear()?

Answer 1

Para responder a la pregunta original, hay varias formas de hacerlo, pero la siguiente sería la más sencilla.

Si ya tiene un identificador para el nodo secundario que desea eliminar, es decirtienes una variable de JavaScript que contiene una referencia a ella:

myChildNode.parentNode.removeChild(myChildNode);

Obviamente, si no estás utilizando una de las numerosas bibliotecas que ya hacen esto, querrás crear una función para abstraer esto:

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

---

EDITAR:Como han mencionado otros:Si tiene controladores de eventos conectados al nodo que está eliminando, querrá asegurarse de desconectarlos antes de que la última referencia al nodo que se elimina quede fuera de alcance, para que las implementaciones deficientes del intérprete de JavaScript pierdan memoria.

Answer 2

Si desea borrar el div y eliminar todos los nodos secundarios, puede poner:

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

Answer 3

targetNode.remove()

Esto lo recomienda el W3C a finales de 2015 y es vainilla js.Mucho mejor/más limpio que el método anterior.

Para su caso de uso:

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

Si necesita un polyfill para garantizar la compatibilidad con versiones anteriores:

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

Documentos de Mozilla

Navegadores compatibles - 92% marzo de 2018

Answer 4

Debe eliminar todos los controladores de eventos que haya configurado en el nodo antes de eliminarlo, para evitar pérdidas de memoria en IE.

Answer 5

Una solución 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();

Referencias:

Selector de atributo igual a [nombre=valor]

Selecciona elementos que tienen el atributo especificado con un valor exactamente igual a un cierto valor.

Selector de hijos (“padre > hijo”)

Selecciona todos los elementos infantiles directos especificados por "niño" de elementos especificados por "padre"

.eliminar()

Similar a .empty (), el método .remove () saca elementos del DOM.Usamos .remove () cuando queremos eliminar el elemento en sí, así como todo lo que está dentro de él.Además de los elementos mismos, se eliminan todos los eventos vinculados y los datos de jQuery asociados con los elementos.

Answer 6

Utilice el siguiente código:

//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.

Answer 7

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

p es el nodo padre y c es el nodo hijo
parentNode es una variable de JavaScript que contiene una referencia principal

Fácil de comprender

Answer 8

Debería poder utilizar el método .RemoveNode del nodo o el método .RemoveChild del nodo principal.

Answer 9

Probablemente deberías usar una biblioteca de JavaScript para hacer cosas como esta.

Por ejemplo, MochiKit tiene una función eliminarElemento, y jQuery tiene eliminar.