feed twitter facebook LinkedIn facebook

JavaScript » Eliminar elementos de una página con JavaScript

septiembre 26, 2007 por Víctor Cuervo 17 Comentarios Imprimir Imprimir

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.

<img src="http://lineadecodigo.com/wp-content/uploads/2006/12/firefox.jpg" id="firefox"/>
<img src="http://lineadecodigo.com/wp-content/uploads/2007/01/bea.gif" id="bea"/>
<img src="http://lineadecodigo.com/wp-content/uploads/2006/12/java.jpg" id="java"/>
<img src="http://lineadecodigo.com/wp-content/uploads/2006/12/opera.jpg" id="opera"/>
<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. }

Visualizar el ejemplo | Descargar el codigo

tags: , , , ,

Artículos relacionados:

17 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2
  1. Pedro Prez
    enero 11, 2008 #

    Excelente. Muy Claro!

    Saludos!

  2. MKX
    marzo 11, 2008 #

    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¿?

  3. tanya
    marzo 30, 2008 #

    no puedo eliminar mis correos por causa del javascrip

  4. tanya
    marzo 30, 2008 #

    como los elimino

  5. ricardo avalos
    abril 29, 2008 #

    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

  6. René
    mayo 19, 2008 #

    Muy util

  7. Jose Saul
    mayo 30, 2008 #

    Asi es como se Explica…

  8. dach
    noviembre 14, 2008 #

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

  9. marisel blanc
    noviembre 24, 2008 #

    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

  10. Maria Jose
    agosto 2, 2009 #

    Muy bueno y me super ayudo :D

1 2

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*