Tenemos una página con una imagen. Debemos colocar un elemento que elimine 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 esquemático. 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 su nombre de 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 encuentra un solo nodo.

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.