Eliminar elementos de una página con JavaScript

26/sep/2007 JavaScript , , , 17 Comentarios
javascript

Una de las cosas que podemos hacer vía JavaScript es modificar el DOM de elementos de una página HTML. Bien insertando, actualizandolos o eliminandolos.

En este caso lo que vamos a realizar es eliminar un elemento de la página, vía ID. En concreto eliminaremos imágenes.

Es por ello que lo primero que vamos a realizar es insertar un conjunto de imágenes en la página. Importante que asociemos un ID a cada una de las imágenes.

  1. <img src="http://lineadecodigo.com/wp-content/uploads/2006/12/firefox.jpg" id="firefox"/>
  2. <img src="http://lineadecodigo.com/wp-content/uploads/2007/01/bea.gif" id="bea"/>
  3. <img src="http://lineadecodigo.com/wp-content/uploads/2006/12/java.jpg" id="java"/>
  4. <img src="http://lineadecodigo.com/wp-content/uploads/2006/12/opera.jpg" id="opera"/>
  5. <img src="http://lineadecodigo.com/wp-content/uploads/2006/12/eclipse.jpg" id="eclipse"/>

Lo siguiente será insertar un formulario. En el, pediremos al usuario el ID que quiere eliminar. Para facilitar hemos dado un id que corresponda con el nombre de la imagen que corresponde. Facilitando la vida al usuario...

Al pulsar el botón, evento onClick, llamaremos a la función JavaScript eliminarElemento(id) y le pasaremos el texto que haya introduccido el usuario.

  1. <form action="">
  2. <label for="elemento">Nombre del logo:</label><input type="text" id="elemento">
  3. <input type="button" onClick="eliminarElemento(document.getElementById('elemento').value);" value="Eliminar Elemento"/>
  4. </form>

Lo realmente importante es lo que va dentro de la función. Los pasos JavaScript para eliminar el ID serán los siguientes:

  • Obtener el elemento al que representa el ID. Mediante el método .getElementById()
  • Validar si el elemento existe. Ya que si no existe habrá que avisar al usuario.
  • Obtener el nodo padre del elemento. Para ello utilizamos el atributo .parentNode
  • Desde el padre del elemento, invocar el método removeChild(elemento). Dicha función eliminará el elemento.

El código JavaScript será el siguiente:

  1. function eliminarElemento(id){
  2. imagen = document.getElementById(id);
  3. if (!imagen){
  4. alert("El elemento selecionado no existe");
  5. } else {
  6. padre = imagen.parentNode;
  7. padre.removeChild(imagen);
  8. }
  9. }

Vídeos sobre Javascript

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

17 comentarios en “Eliminar elementos de una página con JavaScript”

Víctor Cuervo

Fernando

Muy bien y muy claro.

Tambien me interesaria saber como hacer para que volviese a aparecer el elemento
eliminado. Por un borrado accidental, equivocacion, o cualquier otro motivo.

Muchas gracias.

Víctor Cuervo

Andres

Me gusta esto sera divertido

Víctor Cuervo

Víctor Cuervo

@Fidel, me alegro mucho que te haya servido. :-D

Víctor Cuervo

Fidel

Excelente, ya lo adapte a mi codigo, gracias…..

Víctor Cuervo

lineadecodigo

@dora,

El código Javascript está en los ficheros dentro de etiquetas:

<script style="text/javascript">...</script>

Si puedes ser un poco más concreta en tu pregunta buscamos como ayudarte.

Víctor Cuervo

lineadecodigo

@rene, @jose saul, @dach, @Maria Jose,

Me alegro que os haya servido de ayuda. :-)

Víctor Cuervo

dora

necesito eliminar javaScrip porque no puedo iniciar sesion gracias si me ayudan por favor porque no entiendo mucho de esto

Víctor Cuervo

Maria Jose

Muy bueno y me super ayudo :D

Víctor Cuervo

marisel blanc

necesio que me ayuden cada vez que quiero entrar a mi correo electrnoco no pued me sale en la parte de abajo el avascript;;, y no puedo bajar fotos en hi5

Víctor Cuervo

dach

Muchas gracias me sirvio de mucho. felicidades por tu aporte y que sigas asi….

Víctor Cuervo

Jose Saul

Asi es como se Explica…

Víctor Cuervo

René

Muy util

Víctor Cuervo

ricardo avalos

Amigo MKX, tienes que hace referencia al index del option a eliminar. No te olvides que en el caso de los option, como todos llevan el mismo nombre, tú accedes a uno en particular a través de su index.

Saludos desde Chile,

Ricardo

Víctor Cuervo

tanya

como los elimino

Víctor Cuervo

tanya

no puedo eliminar mis correos por causa del javascrip

Víctor Cuervo

MKX

pregunta, y si tengo por ejemplo 6 options que se llaman igual, como los distingo?, porque yo quiero automatizar un programa y para uqe navegue por una web pero tengo que chechear un option, pero la cuestion es que son como 6 y se llaman todos iguales¿?

Víctor Cuervo

Pedro Prez

Excelente. Muy Claro!

Saludos!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*