Skip to content

Courses
Tutorials
Practice
Contests

jQuery Tutorial
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Traversing
jQuery HTML & CSS
jQuery AJAX
jQuery Properties
jQuery Examples
jQuery Interview Questions
jQuery Plugins
jQuery Cheat Sheet
jQuery UI
jQuery Mobile
jQWidgets
Easy UI
Web Technology

How to Dynamically Add/Remove Table Rows using jQuery?

How to Delete All Table Rows Except First One using jQuery?

Last Updated : 17 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.

Approach

First, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. The jQuery function removes all the rows except the first one using the remove() method.

Syntax:

$('#btn').click(function () {
    $("#rTable").find("tr:gt(0)").remove();
});

Example:

HTML

<!DOCTYPE HTML> <html>  <head>     <meta http-equiv="Content-Type"            content="text/html; charset=utf-8">      <script src= "https://code.jquery.com/jquery-3.5.1.min.js">     </script>      <style>         table,         th,         td {             border: 1px solid black;             border-collapse: collapse;         }          th,         td {             padding: 20px;         }     </style>   </head>  <body>     <h4>         Delete all table rows except         first one using jQuery     </h4>      <table style="width:50%" id="rTable">         <tr>             <th>Firstname</th>             <th>Lastname</th>             <th>Age</th>         </tr>         <tr>             <td>Priya</td>             <td>Sharma</td>             <td>24</td>         </tr>         <tr>             <td>Arun</td>             <td>Singh</td>             <td>32</td>         </tr>         <tr>             <td>Sam</td>             <td>Watson</td>             <td>41</td>         </tr>     </table>     <br><br>      <button id="btn">         Remove All Row Except First One     </button>      <script>         $(document).ready(function () {             $('#btn').click(function () {                 $("#rTable").find("tr:gt(0)").remove();             });         });     </script> </body>  </html>

Output:

How-to-delete-all-table-rows-except-first-one-using-jQuery

How to Dynamically Add/Remove Table Rows using jQuery?

V

vkash8574

Improve

Article Tags :

JavaScript
JQuery
Web Technologies
jQuery-Questions

Similar Reads

How to highlight alternate table row using jQuery ?

In this article, we will set the highlight on an alternative table row using jQuery. The :nth-child(2n) selector is used to select the alternative row and the addClass() method is used to set the style of the alternative rows. Syntax: $(tr:nth-child(2n)").addClass("GFG"); Here, we will create a simp

How to select all even/odd rows in table using jQuery ?

In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ

How to Add Edit and Delete Table Row in jQuery ?

In this article, we will create an example of how to add, edit and delete table rows in jQuery. For creating this functionality we need to know about the basics of the HTML table, jQuery basic functionality. Table row: An HTML table is a combination of rows and columns. The table row is in the horiz

How to Dynamically Add/Remove Table Rows using jQuery?

We will dynamically add/remove rows from an HTML table using jQuery. jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc. Adding a rowTo add a

How to Count Number of Rows and Columns in a Table Using jQuery?

Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery. There are a few methods available in jQuery to count the number of rows and columns in an HTML table. Table of Content By iterating through the rows and columnsBy using the leng

How to remove table row from table using jQuery ?

Removing a table row using jQuery involves selecting a specific row within an HTML table and deleting it dynamically. This can be done through various methods like .remove() or .detach(), allowing developers to manipulate the table structure efficiently without reloading the page. Here we have some

How to Delete a Row from Table using AngularJS ?

Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS. Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table

How to create a Zebra Stripes table effect using jQuery ?

Given an HTML document with a table and the task is to create a Zebra Stripes table effect on the table using jQuery. Approach : To achieve the Zebra Stripes table effect, use the below code snippet: $(function() { $("table tr:nth-child(odd)").addClass("zebrastripe"); }); In the above function, zebr

How to create Dynamic Drag and Drop table rows using jQuery Ajax?

In this article, we will discuss the method of How to create Dynamic and Drop table rows using JQuery Ajax. We will use jQuery and HTML CSS to perform the operations of Drag and Drop on the table row. First to perform the operations of the Drag and Drop table row we need two jQuery libraries without

How to remove options from select element using jQuery ?

Removing options from a select element using jQuery means programmatically deleting specific or all <option> elements within a <select> dropdown. This can be done using jQuery methods like remove() or empty(), allowing dynamic updates of the dropdown's available choices based on conditio

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences