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.