Borrar Nodo con Javascript

indice de ejemplos

Tenemos una página con una imagen. Debemos crear un script que sea capaz de eliminar el bloque que contiene a la imagen

 

Solución

<script>

function borraNodo(nombre){

//Buscar el nodo

var nodo = document.getElementById(nombre);

//borrar el nodo

nodo.remove()

}

</script>

 

<body>

<img src="/imgs/programa.jpg" id="muestra">

<p>

<a href="#" onclick="borraNodo('muestra')">borrar imagen</a>

</p>

</body>

Explicación

El codigo HTML es bastante simple: solo un bloque img y un enlace sobre el que pulsar con el ratón para lanzar la función de borrado, borraNodo(nombre). El parámetro es el id del nodo a borrar.

  • El link dispara un evento onclick que llama a la función borraNodo()
  • El script busca el nodo a borrar por el valro del atributo id
  • Aplica al nodo el método remove()

Así de simple es el borrado de un nodo: un secillo método del propio nodo

La búsqueda de un nodo se realiza con el método de document getElementById(nombre), encuentra al elemento con el id pasado como argumento, que al ser único solo encuentra un elemento.

El método remove() es un método del propio nodo

Este mismo resultado lo hubieramos obtenido mediante el método removeChild() del padre del bloque imagen, que en este caso es body. Por tanto también se hubiera borrado lo imagen mediante

document.body.removeChild(nodo)

El padre de nodo es el elemento body.