Cómo quitar un elemento con JavaScript

Escrito por sue smith Google | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo quitar un elemento con JavaScript
Las funciones de JavaScript pueden navegar por estructuras HTML en una página. (Comstock/Comstock/Getty Images)

Las funciones de JavaScript pueden añadir y eliminar elementos de una página web. Los elementos HTML en una página web se organizan en una estructura de "árbol", la cual es accesible a las funciones de JavaScript que operan dentro de la página. Al navegar por esta estructura, una función de JavaScript es capaz primero de localizar un elemento y luego eliminarlo con una referencia a su elemento principal. Crear funciones de JavaScript para eliminar elementos no suele ser difícil y es una buena forma de aprender a desarrollar habilidades de programación web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Crea tu página web conteniendo el elemento que deseas remover. Ingresa el código siguiente en un nuevo archivo en un editor de texto y guárdalo con la extensión ".HTML":

    <html> <head> </head> <body> <div id="Borrar" onclick="removeElem(this.id)">Borrame</div> </body> </html>

    Esta es una simple página de ejemplo para demostrar el principio de la remoción de un elemento HTML, de manera que la página contiene únicamente el elemento a eliminar. Este elemento ha sido asignado a una función "onclick", lo que significa que cuando el usuario haga clic en ésta, una función JavaScript será llamada y se le enviará el atributo "id".

  2. 2

    Crea tu función JavaScript. Introduce un área de código en la sección de encabezado de la página, entre las etiquetas de apertura y cierre del encabezado:

    <script type="text/javascript"> //función llamada dentro de la página function removeElem(divID) { //aquí elimina el elemento } </script>

    Esto representa la función que es llamada al hacer clic en el elemento de página. Observa que el nombre de la función coincide con la función del elemento "onclick". El parámetro "divID" representa el valor del id proporcionado cuando se haga clic en el elemento.

  3. 3

    Busca el elemento que se ha presionado. Agrega lo siguiente dentro de tu función de JavaScript, entre la apertura y el cierre de los corchetes de la función:

    var childElem = document.getElementById(divID);

    Este código utiliza el valor id proporcionado para localizar el elemento dentro de la página HTML. Ahora la variable "childElem" tiene un puntero al elemento al cual se le ha hecho clic. Puedes utilizar esta referencia para su posterior procesamiento.

  4. 4

    Busca el elemento padre del elemento que has pulsado. Para eliminar un elemento, debes obtener una referencia a su padre, y luego instruir a este elemento para que elimine el elemento secundario que estás tratando de remover. Agrega el código siguiente para obtener una referencia al padre:

    var parentElem = childElem.parentNode;

    El código tiene ahora una referencia al elemento que deseas eliminar y a su elemento padre.

  5. 5

    Elimina el elemento de tu página. Agrega el código siguiente, que realiza la operación de eliminación:

    parentElem.removeChild(childElem);

    Esto llama a un método del elemento primario, dándole instrucciones para eliminar el elemento secundario especificado como parámetro. Guarda el archivo y abre la página en un navegador web para probarlo. Haz clic en el elemento de texto y verás que desaparece. Para probar nuevamente, actualiza la página y vuelve a hacer clic.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles