Artículos
Javascript

Eliminar elementos de una página con JavaScript

26/Sep/2007

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.





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.

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:

function eliminarElemento(id){
	imagen = document.getElementById(id);	
	if (!imagen){
		alert("El elemento selecionado no existe");
	} else {
		padre = imagen.parentNode;
		padre.removeChild(imagen);
	}
}

Código Fuente

Descárgate el código fuente de Eliminar elementos de una página con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
23 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios