El método jQuery remove() se usa para eliminar una fila de una tabla HTML.
Método jQuery remove() : este método elimina los elementos seleccionados junto con el texto y los Nodes secundarios. Este método también elimina datos y eventos de los elementos seleccionados.
Sintaxis:
$(selector).remove(selector)
Parámetros: Acepta selector de parámetro único que es opcional. Especifica uno o más elementos a eliminar. Si se van a eliminar varios elementos, sepárelos con un operador de coma (,).
Ejemplo 1: este ejemplo primero selecciona la fila por valor de id y luego la elimina usando el método remove() .
<!DOCTYPE HTML> <html> <head> <title> How to remove a table row from table </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> #myCol { background:green; } table { color:white; } #Geek_p { color:green; font-size:30px; } td { padding:10px; } </style> </head> <body> <center> <h1 style = "color:green;" > GeeksForGeeks </h1> <table> <colgroup> <col id="myCol" span="2"> <col style="background-color:green"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr id = "row1"> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick = "Geeks()"> Click here </button> <!-- Script to remove table row from table --> <script> function Geeks() { $("#row1").remove(); } </script> </center> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo primero selecciona el último elemento <tr> de su padre y lo elimina usando el método remove() .
<!DOCTYPE HTML> <html> <head> <title> How to remove table row from table </title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> #myCol { background:green; } table { color:white; } #Geek_p { color:green; font-size:30px; } td { padding:10px; } </style> </head> <body> <center> <h1 style = "color:green;" > GeeksForGeeks </h1> <table> <colgroup> <col id="myCol" span="2"> <col style="background-color:green"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr id = "row1"> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick = "Geeks()"> Click here </button> <script> function Geeks() { $('tr:last-child').remove(); } </script> </center> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA