Si está creando algo y desea eliminar algunos elementos HTML al hacer clic, pasar el mouse o en cualquier evento, debe saber que jQuery puede hacerlo fácilmente por nosotros. Hay tres métodos jQuery que nos ayudan a eliminar elementos HTML con algunas pequeñas diferencias. Estos métodos son:
- Método remove(): Elimina completamente los elementos seleccionados del DOM. También elimina los controladores de eventos y los datos asociados con el elemento seleccionado. Los datos asociados con el elemento eliminado se pueden restaurar, pero los controladores de eventos no se pueden restaurar.
- Método detach(): también elimina el elemento seleccionado junto con todos sus elementos secundarios, pero la copia de los elementos eliminados se conserva para volver a utilizarla más adelante.
- Método vacío(): elimina todos los elementos secundarios del elemento seleccionado, pero no elimina el elemento seleccionado en sí.
Entendamos esto con un ejemplo:
Ejemplo 1: Este ejemplo ilustra el uso del método remove() .
HTML
<!DOCTYPE html> <html lang="en"> <head> <script src= "https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <style> .container { background-color: yellow; width: 700px; height: 300px; } .child-block { background-color: red; width: 30%; height: 50%; } </style> </head> <body> <div class="container"> <div class="child-block"></div> </div> <button class="remove">remove</button> <script> $(".remove").click(function () { $(".container").remove(); }); </script> </body> </html>
Producción::
Como puede ver en las capturas de pantalla de salida anteriores, al hacer clic en el botón Eliminar, se eliminó el bloque amarillo junto con su bloque rojo secundario.
Ejemplo 2: Este ejemplo ilustra el uso del método detach() .
HTML
<!DOCTYPE html> <html lang="en"> <head> <script src= "https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <style> .container { background-color: yellow; width: 700px; height: 300px; } .child-block { background-color: red; width: 30%; height: 50%; } </style> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <div class="container"> <div class="child-block"></div> </div> <div class="attach"></div> <button class="detach"> remove </button> <button class="insert"> Insert </button> </center> <script> let removed; $(".detach").click(function () { removed = $(".container").detach(); }); $(".insert").click(function () { removed.appendTo(".attach"); }); </script> </body> </html>
Producción:
Como puede ver, cuando primero hacemos clic en el botón Eliminar, eliminó el elemento contenedor y todos sus elementos secundarios, pero dado que se usa detach(), todos los controladores de eventos y los datos se almacenan en la variable eliminada, por lo que agregamos todo eliminado. elemento de nuevo en el cuerpo al hacer clic en el botón Insertar.
Ejemplo 3: Este ejemplo ilustra el uso del método empty() .
HTML
<!DOCTYPE html> <html lang="en"> <head> <script src= "https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <style> .container { background-color: yellow; width: 700px; height: 300px; } .child-block { background-color: red; width: 30%; height: 50%; } </style> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <div class="container"> <div class="child-block"></div> </div> <button class="empty">empty</button> </center> <script> $(".empty").click(function () { $(".container").empty(); }); </script> </body> </html>
Producción:
Como puede ver, al hacer clic en el botón vacío se elimina el div secundario del contenedor div (que es un elemento principal), por lo que se eliminó el bloque rojo.
Diferencia entre los métodos vaciar(), eliminar() y separar():
retirar() | despegar() | vacío() |
---|---|---|
Elimina el elemento coincidente y sus elementos secundarios del DOM. | Elimina los elementos coincidentes y sus elementos secundarios del DOM. | Elimina solo el elemento secundario del elemento coincidente. |
También elimina todos los controladores de eventos, datos, etc. presentes dentro del elemento coincidente | Mantiene datos del elemento desprendido y puede ser reutilizado. | Eliminó datos, controladores de eventos, etc. de elementos secundarios. El elemento emparejado y sus datos permanecen seguros. |
Si se eliminó un elemento, no se puede volver a insertar en el DOM. | El elemento separado se puede insertar nuevamente dentro de DOM muy fácilmente. | Si se vacía un elemento, sus elementos secundarios no se pueden volver a insertar. |
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA