- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to delete a row from a table using jQuery?
Use event delegation to include buttons for both add a new and delete a table row on a web page using jQuery.
Firstly, set the delete button:
<button type="button" class="deletebtn" title="Remove row">X</button>
To fire event on click of a button, use jQuery on() method:
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});The following is the complete code delete a row from a table using jQuery:
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>
- Related Articles
- How to add a new row in a table using jQuery?
- How can we delete a single row from a MySQL table?
- How to delete a row from ResultSet object using JDBC?
- How to insert new row into table at a certain index using jQuery?
- Python Pandas - How to delete a row from a DataFrame
- Does deleting row from view delete row from base table in MySQL?
- How to add table row in jQuery?
- How to delete a table from MongoDB database?
- What happens if I will delete a row from MySQL parent table?
- How to delete a row from an R data frame?
- How to delete a column from a table in MySQL?
- How to delete all records from a table in Oracle using JDBC API?
- How to delete duplicates and leave one row in a table in MySQL?
- How to add a row to a table using only strings from another table as reference in MySQL?
- How can you delete a record from a table using MySQL in Python?
Advertisements