How to remove table row from table using jQuery ? - GeeksforGeeks

03 Aug, 2021
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 = "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>                    
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 = "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>                    
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.
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?