¿Cómo eliminar la fila de la tabla de la tabla usando jQuery?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *