JQuery - Delete table row if delete button is clicked
Question
I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:
Javascript
function onload(){
$("#addbutton").on("click",addRow);
$(".delete").onclick(function(){
$(this).closest('tr').remove();
});
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
3 answers
solution1
1 2017-07-02 16:40:26
There is no onclick method in jQuery, use click instead.
$(".delete").click(function() { $(this).closest("tr").remove(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Row 1</td> <td><button class="delete">Del</button></td> </tr> <tr> <td>Row 2</td> <td><button class="delete">Del</button></td> </tr> <tr> <td>Row 3</td> <td><button class="delete">Del</button></td> </tr> </table>
solution2
0 ACCPTED 2017-07-02 16:42:00
You should use event delegation for delete button. since you are adding button dynamically.
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
function onload(){ $("#addbutton").on("click",addRow); var i = 1; function addRow(){ var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+ "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and // buttons $(newRow).appendTo("#maintable"); //Append the new row // to the table // Next three commands clear the input boxes $("#namebox").val(''); $("#surnamebox").val(''); $("#agebox").val(''); // Add to the numer of rows in the table i++; }// addRow END }; $(document).on("click",'.delete',function(){ $(this).closest('tr').remove(); });
body{ background-color: darkcyan; } div#header{ position: relative; left: 30em; width: 18em; text-align: center; } div#input-table{ width:50em; } table,th,tr,td{ border: 1px solid black; border-collapse: collapse; } td{ text-align: center; } th#buttons{ width: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery- ui.min.js"></script> </head> <body onload="onload()"> <div id="header"> <h2>Memory-Only Database</h2> </div> <div id="input-table"> <table id="maintable" style="width: 60%"> <tr> <th>Name</th> <th>Surname</th> <th>Age</th> <th id="buttons1">buttons1</th> <th id="buttons2">buttons2</th> <th id="counter">counter</th> </tr> <tr> <td> <input id="namebox" name="name" type="text" value=""> </td> <td> <input id="surnamebox" name="surname" type="text" value=""> </td> <td> <input id="agebox" name="age" type="number" value=""> </td> <td> <button id="addbutton" name="add" type="button">ADD</button> </td> </tr> </table> </div>
solution3
0 2017-07-02 18:02:42
Another way you can delete row .... during adding new row give that row an id and call an onclick function during delete.
function deleterow(id){ $("#newrow-"+id+"").remove(); } function onload(){ $("#addbutton").on("click",addRow); var i = 1; function addRow(){ var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+ "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and // buttons $(newRow).appendTo("#maintable"); //Append the new row // to the table // Next three commands clear the input boxes $("#namebox").val(''); $("#surnamebox").val(''); $("#agebox").val(''); // Add to the numer of rows in the table i++; }// addRow END };
body{ background-color: darkcyan; } div#header{ position: relative; left: 30em; width: 18em; text-align: center; } div#input-table{ width:50em; } table,th,tr,td{ border: 1px solid black; border-collapse: collapse; } td{ text-align: center; } th#buttons{ width: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery- ui.min.js"></script> </head> <body onload="onload()"> <div id="header"> <h2>Memory-Only Database</h2> </div> <div id="input-table"> <table id="maintable" style="width: 60%"> <tr> <th>Name</th> <th>Surname</th> <th>Age</th> <th id="buttons1">buttons1</th> <th id="buttons2">buttons2</th> <th id="counter">counter</th> </tr> <tr> <td> <input id="namebox" name="name" type="text" value=""> </td> <td> <input id="surnamebox" name="surname" type="text" value=""> </td> <td> <input id="agebox" name="age" type="number" value=""> </td> <td> <button id="addbutton" name="add" type="button">ADD</button> </td> </tr> </table> </div>
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.
Related Question
Delete row from table after button clicked
How to get row value from table when delete button is clicked?
Delete a table row jquery
Delete button in table, jQuery
How to delete Row in table on 'Delete' button
Add/Delete table row with button
Delete row table intercepting the button?
Delete row is working when clicked twice in jQuery
How to remove row in shown table by clicking on delete button in jquery
Delete a table row with javascript / jquery
Related Tags