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://img.aulambra.com/wp-content/uploads/2006/12/firefox.jpg" id="firefox"/>
<img src="http://img.aulambra.com/wp-content/uploads/2007/01/bea.gif" id="bea"/>
<img src="http://img.aulambra.com/wp-content/uploads/2006/12/java.jpg" id="java"/>
<img src="http://img.aulambra.com/wp-content/uploads/2006/12/opera.jpg" id="opera"/>
<img src="http://img.aulambra.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. dora
    agosto 30, 2010 #

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

  2. lineadecodigo
    septiembre 10, 2010 #

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

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

  3. lineadecodigo
    septiembre 10, 2010 #

    @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.

  4. Fidel
    enero 13, 2012 #

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

  5. Víctor Cuervo
    enero 23, 2012 #

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

  6. Andres
    noviembre 18, 2012 #

    Me gusta esto sera divertido

  7. Fernando
    diciembre 19, 2012 #

    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.

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>

*