Dado un documento HTML y la tarea es eliminar el elemento principal excepto su elemento secundario.
Enfoque 1:
- Use el método de contenido() para seleccionar todos los elementos secundarios directos, incluidos los Nodes de texto y comentarios para el elemento seleccionado.
- Los elementos seleccionados se almacenan en una variable.
- Ahora, use el método replaceWith() para reemplazar el contenido del elemento principal por su elemento secundario que se almacena en una variable.
Ejemplo: este ejemplo utiliza el método contents() y replaceWith() para eliminar el elemento principal excepto su elemento secundario.
<!DOCTYPE HTML> <html> <head> <title> Remove the parent element not its child using jQuery </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" id = "h1"> GeeksForGeeks </h1> <div id = "parent" style = "border: 1px solid black;"> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> </p> </div> <script> var up = document.getElementById('GFG_UP'); up.innerHTML = "This content is inside a big DIV."; var down = document.getElementById('GFG_DOWN'); down.innerHTML = "Click on the button to remove " + "just this parent DIV"; var heading = document.getElementById('h1'); function GFG_Fun() { var content = $("#parent").contents(); $("#parent").replaceWith(content); } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2: este enfoque utiliza el método unwrap() para eliminar el elemento principal del elemento seleccionado.
Ejemplo:
<!DOCTYPE HTML> <html> <head> <title> Remove the parent element not its child using jQuery </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" id = "h1"> GeeksForGeeks </h1> <div id = "parent" style = "border: 1px solid black;"> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> This content is inside a big DIV. </p> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "color:green; font-size: 20px; font-weight: bold;"> Click on the button to remove just this parent DIV </p> </div> <script> function GFG_Fun() { $("#parent").contents().unwrap(); } </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA