Home  >  Article  >  Web Front-end  >  jquery remove table row

jquery remove table row

WBOY
WBOYOriginal
2023-05-24 20:37:071587browse

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)');

2. Delete selected rows

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

rowToBeDeleted.remove();

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();
    });
});

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!

Statement:
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