Open In App

How to remove table row from table using jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery remove() method is used to remove a row from HTML table.
jQuery remove() Method: This method removes the selected elements alongwith text and child nodes. This method also removes data and events of the selected elements.

Syntax:

$(selector).remove(selector)

Parameters: It accepts single parameter selector which is optional. It specifies one or more elements to be removed. If multiple elements are to be removed, separate them with a comma (,) operator.

Example 1: This example first selects the row by id value and then removes it by using remove() method.




<!DOCTYPE HTML> 
<html
    <head
      
        <title
            How to remove a table row
            from table
        </title
          
        <script src
        </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>                    


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example first select the last <tr> element of its parent and removes it by using remove() method.




<!DOCTYPE HTML> 
<html
    <head
        <title
            How to remove table row
            from table
        </title
          
        <script src
        </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>                    


Output:

  • Before clicking on the button:
  • After clicking on the button:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads