JQuery remove () not working properly
Question
I am trying to create a dynamic table using JQuery, Where a button is clicked to add and remove rows.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function() { var i = 2; $("#btn1").click(function() { $("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>"); }); $("#btn2").click(function() { if (i > 2) { $("#r" + i).remove(); i--; } else { alert("Row Cannot Be Deleted !"); } }); }); </script> </head> <body> <form> <table border="1"> <tr> <td>1</1> <td>2</td> </tr> </table> </form> <button id="btn1">Add Item</button> <button id="btn2">Delete Item</button> </body> </html>
The first click on the delete button does not seem to work properly. Only the counter "i" get decreased by one but no row is being deleted. As a result, when adding an item the "#" will always be the same as the item before it. I couldn't figure out what is the mistake I'm doing to get such a result.
10 answers
solution1
1 ACCPTED 2016-07-25 09:14:16
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function() { var i = 1; $("#btn1").click(function() { i++; $("table").append("<tr id='r" + i + "' ><td>" + i +"<td><input type='text' /></td></tr>"); }); $("#btn2").click(function() { if (i > 2) { $("#r" + i).remove(); i--; } else { alert("Row Cannot Be Deleted !"); } }); }); </script> </head> <body> <form> <table border="1"> <tr> <td>1</1> <td>2</td> </tr> </table> </form> <button id="btn1">Add Item</button> <button id="btn2">Delete Item</button> </body> </html>
solution2
1 2016-07-25 09:16:55
You need to make some modifications to your code. Instead of keeping a variable i to keep track of latest row id, you should base your calculations on the number of rows currently present in the table. This is more reliable and flexible than tracking it using the variable.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { var i = $("#mytable tr").length + 1; $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>"); }); $("#btn2").click(function() { var i = $("#mytable tr").length; if (i > 1) { $("#r" + i).remove(); } else { alert("Row Cannot Be Deleted !"); } }); }); </script> </head> <body> <form> <table id="mytable" border="1"> <tr> <td>1</1> <td>2</td> </tr> </table> </form> <button id="btn1">Add Item</button> <button id="btn2">Delete Item</button> </body> </html>
solution3
1 2016-07-25 09:21:30
The delete button works if you click it first. The issue you have is tracking the state of the i variable correctly, which is why this pattern is more of a pain than it's worth.
From the look of your code, all you need to do is ensure that there is at least 1 row in the table. If so, you can just check the number of tr elements currently in the table on click of the delete button, like this:
$(document).ready(function() { $("#btn1").click(function() { var $tr = $('table tr'); $tr.last().after("<tr><td>" + ($tr.length + 1) + "<td><input type='text' /></td></tr>"); }); $("#btn2").click(function() { var $tr = $('table tr'); if ($tr.length > 1) { $tr.last().remove(); } else { alert("Row cannot be deleted!"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <table border="1"> <tr> <td>1</td> <td>2</td> </tr> </table> </form> <button id="btn1">Add Item</button> <button id="btn2">Delete Item</button>
solution4
0 2016-07-25 09:10:50
The issue is with this line $("#r" + i).remove();
You need to change it to (i-1)
$("#btn2").click(function() {
console.log(i)
if (i > 2) {
$("#r" + (i-1)).remove(); // changed here
i--;
} else {
alert("Row Cannot Be Deleted !");
}
});
});
solution5
0 2016-07-25 09:12:11
I guess that the following code might be a cleaner version over the provided structure. If your button is part of the same row, you can do it by calling this method and passing that row to the method
JS function to delete the row
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('Yourtable').deleteRow(i);
}
Calling Function
This is the place where you dynamically create your delete button nd the table itself
deletebtn.onclick = function() {
deleteRow(this);
};
solution6
0 2016-07-25 09:14:33
just decrement i sooner:
$("#btn2").click(function() {
if (i > 2) {
i--;
$("#r" + i).remove();
} else {
alert("Row Cannot Be Deleted !");
}
});
solution7
0 2016-07-25 09:16:19
insitaily while trying to delete you have incremented alreay the i+++
<td>" + i+++"<td>
so it increases the i values while trying to delete obviously the ID wont be there thats why this problem you can try like this
$("#r" + (i-1)).remove();
for refrence https://plnkr.co/edit/IxnGt0PVMoXiS5lj6g0Q?p=preview
solution8
0 2016-07-25 09:19:23
Example that may help
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var next = $('table tr').length + 1;
$("table").append("<tr id='r" + next + "' ><td>"+ next +"<td><input type='text' /></td></tr>");
});
$("#btn2").click(function() {
$("table tr:last()").remove();
});
});
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>1</1>
<td><input type="text"/></td>
</tr>
</table>
</form>
<button id="btn1">Add Item</button>
<button id="btn2">Delete Item</button>
</body>
</html>
solution9
0 2016-07-25 09:19:58
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var i = 2;
$("#btn1").click(function() {
$("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>");
});
$("#btn2").click(function() {
if (i > 2) {
$("#r" + (i-1)).remove();
i--;
} else {
alert("Row Cannot Be Deleted !");
}
});
});
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>1</1>
<td>2</td>
</tr>
</table>
</form>
<button id="btn1">Add Item</button>
<button id="btn2">Delete Item</button>
</body>
</html>
solution10
0 2016-07-25 09:35:42
$(document).ready(function () { var i = 1; $("#btn1").click(function () { i++; $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>"); }); $("#btn2").click(function () { if (i > 1) { $("#r" + i).remove(); i--; } else { alert("Row Cannot Be Deleted !"); } }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <form> <table border="1"> <tr> <td> 1</1> <td> 2 </td> </tr> </table> </form> <button id="btn1"> Add Item</button> <button id="btn2"> Delete Item</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.