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

javascript insert node

Question

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

Answer 1

targetNode.remove ()

Esto es recomendado por W3C a finales de 2015, y es vanilla JS . Mucho mejor / más limpio que el método anterior.

Para su caso de uso:

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

Si necesita un relleno de poliuretano 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% en marzo de 2018

Answer 2

Debe eliminar cualquier controlador de eventos que haya establecido en el nodo antes de eliminarlo, para evitar pérdidas de memoria en IE

Answer 3

Debería poder usar el método .RemoveNode del nodo o el método .RemoveChild del nodo primario.

Answer 4

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

EDITAR: Como han mencionado otros: si tiene algún manejador de eventos conectado al nodo que está eliminando, querrá asegurarse de desconectarlos antes de que la última referencia al nodo que se está eliminando quede fuera del alcance, por temor a implementaciones deficientes. de la memoria de fuga del intérprete de JavaScript.

Answer 5

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

Por ejemplo, MochiKit tiene una función removeElement , y jQuery tiene remove .

Answer 6

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 7

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 Igual a atributos [nombre = valor]

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

Selector hijo ("padre> hijo")

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

.remove()

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

Answer 8

Usa 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 9

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

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

Fácil de comprender