jquery - parent() doesn't delete rows -
i'm writing jquery script add 3 elements table. far, haven't been able delete entire row using parent() function. explain i'm doing wrong?
$(function(){ $("#dvtable").hide(); $("#btngenerate").click(function(){ var ename = $("#ename").val(); var eid = $("#eid").val(); var desc = $("#desc").val(); var dvtable= $("#display"); $("#formcontainer").hide(); $("#dvtable").show(); var content = dvtable.children(); content.append('<tr>') .append('<td>' + ename + '</td>') .append('<td>' + eid + '</td>') .append('<td>' + desc + '</td>') .append('<td onclick="edit()">edit</td>') .append('<td onclick="remove()">del</td>') .append('</tr>'); }); $("#addentry").click(function(){ $("#ename").val(""); $("#eid").val(""); $("#desc").val(""); $("#formcontainer").show(); $("#dvtable").hide(); }); }); function edit(){ } function remove(){ $(this).parent().remove(); }
<html> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ //$("#dvtable").hide(); $("#btngenerate").click(function () { var ename = $("#ename").val(); var eid = $("#eid").val(); var desc = $("#desc").val(); sztr = "<tr><td>"; sztr = sztr + ename + "</td>"; sztr = sztr + "<td>" + eid + "</td>"; sztr = sztr + "<td>" + desc + "</td>"; sztr = sztr + '<td onclick="edit(this)">edit</td>'; sztr = sztr + "'<td class='delete'>del</td>'"; sztr = sztr + "</tr>"; $('#display tbody').append(sztr); }); $('#display').on('click', '.delete', function () { $(this).parents('tr').remove(); }); }); </script> </head> <body> name:<input type="text" id="ename" value="name"/><br /> id: <input type="text" id="eid" value="new_id"/><br /> des <input type="text" id="desc" value="description"/><br /> <input type="button" value="generate" id="btngenerate"> <div id="dvtable"> <table id="display"> <tbody></tbody> </table> </div> </body> </html>
Comments
Post a Comment