Cómo eliminar un elemento HTML usando JavaScript?

Las manipulaciones DOM de JavaScript permiten a un usuario eliminar cualquier elemento de la página web HTML utilizando el eliminar() método. Sin embargo, se requiere una referencia a su nodo en JavaScript para eliminar un elemento. Solo con esa referencia se puede eliminar un elemento de la página web. El eliminar() El método elimina el elemento HTML del modelo de objeto de documento de la página web tomando el elemento como nodo. Veamos la sintaxis del eliminar() Método disponible para todos los elementos de página HTML.

Sintaxis del método remove ()

La sintaxis del método eliminar se da como

elemrefferencia.eliminar();

De la sintaxis anterior, es evidente que solo necesita aplicar el eliminar() en un elemento o en un nodo para eliminarlo, y no se requieren parámetros adicionales.

Ejemplo: elimine un elemento de una página web HTML

Para demostrar el uso de la eliminar() Método, cree una página web HTML con algún texto y un botón utilizando las líneas de código dentro de la etiqueta:

Quieres quitarme!

Haz clic en mí para eliminar

Observe que un al hacer clic() El atributo se ha agregado con el botón que buscará el Buttonclicked () Método dentro del archivo de script. Y el párrafo para eliminar tiene la identificación como "mi texto"

Ejecutar la página web HTML. Verá la siguiente pantalla en su navegador:

Para agregar funcionalidad en el botón Haga clic, diríjase al archivo de script y cree el Buttonclicked () función con las siguientes líneas de código:

función buttonclicked ()
// Las próximas líneas deben colocarse aquí dentro

Dentro de esta función, el primer paso es obtener una referencia al párrafo que se eliminará utilizando el getElementById () método como

var elem = documento.getElementById ("mytext");

La referencia ha sido almacenada dentro del elem variable. Utilizar el eliminar() Método en esto elem variable con la ayuda del operador DOT

elem.eliminar();

Todo el fragmento del código de script es como el siguiente:

función buttonclicked ()
var elem = documento.getElementById ("mytext");
elem.eliminar();

Ejecute la página web y haga clic en el botón para eliminar la etiqueta del párrafo con la ID "mi texto":

Y el elemento se ha eliminado de la página web HTML y también.

Conclusión

Con cada elemento HTML, hay una función incorporada que viene con ES6 JavaScript que erradica el elemento de la página web HTML y el DOM. Este método se llama eliminar() método y se aplica al elemento utilizando un operador DOT. El método remove () no requiere argumentos y no devuelve ningún valor. Este artículo demostró el funcionamiento del método remove ().