Home > Web Front-end > Front-end Q&A > jquery remove table row

jquery remove table row

WBOY
Release: 2023-05-24 20:37:07
Original
1669 people have browsed it

In the process of web development, the table is a frequently used component, but we may need to delete a certain row of data in the table. To achieve this purpose, we can use jQuery.

1. Select the rows to be deleted

First, we need to select the rows to be deleted. We can select rows in the table through CSS selectors. Here, we assume that we want to delete the second row of data in the table, and the CSS selector is "tr:eq(1)".

var rowToBeDeleted = $('table tr:eq(1)');
Copy after login

2. Delete selected rows

We can use jQuery’s remove() function to delete selected rows.

rowToBeDeleted.remove();
Copy after login

3. Complete code

The following is a complete jQuery code example, including selecting and deleting specific rows in the table.

$(document).ready(function () {
    $('#delete').click(function () {
        var rowToBeDeleted = $('table tr:eq(1)');
        rowToBeDeleted.remove();
    });
});
Copy after login

In the above code, we use jQuery’s $(document).ready() function, which is a function that is executed after the page is loaded. We will perform the delete operation when the "delete" button is clicked. Here we select the second row in the table and delete it.

4. Summary

In this article, we delete rows in the table by using jQuery's remove() function. This function can be used in many practical scenarios in web development, such as implementing deletion and editing functions in data tables.

The above is the detailed content of jquery remove table row. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template