Cómo eliminar un elemento HTML usando JavaScript?
La forma más atómica de eliminar un elemento de la página web HTML es usar el remove () en ese elemento. Para aplicar cualquier método a un elemento HTML, el usuario debe crear una referencia a ese elemento dentro del código JavaScript.
Este artículo demostrará cómo eliminar un elemento de un documento HTML con la ayuda de un ejemplo.
El método remove ()
El método eliminar (como se mencionó anteriormente) se usa para eliminar un elemento en el que se aplica del documento HTML. La sintaxis del método eliminar es la siguiente:
elemref.eliminar()En esta sintaxis, Elemref es la referencia del elemento HTML dentro del código JavaScript. Esta función no toma parámetro, ni devuelve nada. Echemos un vistazo a algunos ejemplos
Ejemplo1: Eliminar un elemento A usando su clase
Comience creando un nuevo archivo HTML y coloque las siguientes líneas dentro de ese archivo:
Tengo la clase "removema", así que quítame!
Por linuxhint
En estas líneas, se crea una etiqueta simple con la clase establecida en "Quitame". Ejecutar este documento HTML muestra la siguiente salida en el terminal:
La salida muestra el
Etiqueta en la pantalla. El es solo un marcador de posición para que la página web no esté vacía cuando se elimina el elemento. Después de eso, simplemente agregue un botón que elimine el elemento sobre el botón Presione y configure su valor de OnClick en Buttonclicked ()::
Esto nos da la siguiente página web:
El botón se agrega a la página web, ahora en la etiqueta Agregar en las siguientes líneas:
función buttonclicked ()Elem = documento.GetElementsByClassName ("RetRoveMe");
elem.eliminar();
En las líneas anteriores:
- Se crea la función ButtonClicked (), que se ejecutará al presionar el botón de eliminar
- Dentro de la función, se crea una referencia al elemento a eliminar utilizando su nombre de clase
- Después de eso, se llama al método RemoLE () en el elemento para eliminarlo del documento HTML
Ejecute el código ahora para obtener los siguientes resultados:
Tan pronto como se presiona el botón, se elimina el elemento con la className = "Removeeme" del documento HTML.
Ejemplo 2: Eliminar un elemento usando su ID
Cree un documento HTML, y al igual que en el Ejemplo 1, cree una etiqueta P y un botón, pero esta vez, da el
etiqueta una identificación en lugar de clase:
Esta vez, tengo la identificación como "removema", así que quítame!
Por linuxhint
Esto dará la siguiente salida en el navegador:
Después de eso, en el archivo de script agregue las siguientes líneas:
función buttonclicked ()Elem = documento.getElementsById ("removema");
elem.eliminar();
En las líneas anteriores:
- Se crea la función ButtonClicked (), que se ejecutará al presionar el botón de eliminar
- Dentro de la función, se crea una referencia al elemento a eliminar utilizando su id = "removema"
- Después de eso, se llama al método RemoLE () en el elemento para eliminarlo del documento HTML
Ejecutar el elemento HTML y presionar el botón crea el siguiente resultado:
El elemento con la identificación como "removema" se eliminó del documento HTML
Conclusión
El método remove () se puede aplicar en un elemento para eliminarlo del DOM del documento HTML. Sin embargo, para aplicar este método a un elemento, primero se debe hacer una referencia al elemento. Y luego, el método remove () se usa en esa referencia de ese elemento usando el operador DOT. Este artículo ha explicado el funcionamiento del método remove () con ejemplos.