html - Delete each row in a table using JavaScript -
i working on application allows user click delete button on row in table, confirmation modal should pop up; when click yes, should able delete row. code doesn't that, instead first deletes header of want delete row specified, not header. used bootstrap css.
function deleterow(r) { var = r.parentnode.parentnode.rowindex; document.getelementbyid("datatable-responsive").deleterow(i); $('#confirm-delete').modal('hide'); }
<table id="datatable-responsiv"> <thead align="center"> <tr> <th> <input type="checkbox" name="prog" id="check-all" class="flat"> </th> <th>name of video</th> <th>link</th> <th>action</th> </tr> </thead> <tbody> <tr class="even pointer"> <td class="a-center btndelete" data-id="1"> <input type="checkbox" class="flat" name="table_records"> </td> <td>john </td> <td>https://www.youtube.com/watch?v=mu2ej9prmfy</td> <td> <button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> view </button> <button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> edit </button> <button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btndelete" ><i class="fa fa-trash-o"></i> delete </button> </td> </tr> <tr class="odd pointer"> <td class="a-center btndelete" data-id="2"> <input type="checkbox" class="flat" name="table_records"> </td> <td>james</td> <td>https://www.youtube.com/watch?v=on3gb9tlfy8</td> <td> <button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> view </button> <button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> edit </button> <button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btndelete" ><i class="fa fa-trash-o"></i> delete </button> </td> </tr> </tbody> </table> <!--model--> <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">confirm delete</h4> </div> <div class="modal-body"> <p>you delete 1 track, procedure irreversible.</p> <p>do want proceed?</p> <p class="debug-url"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> <button type="button" class="btn btn-danger btn-ok" value="delete" onclick="deleterow(this)">delete</button> </div> </div> </div> </div>
assuming argument you're passing deleterow
function grand-child of row want delete, problem may you're calling deleterow
(the dom method) on table itself, not table's tbody. try
document.getelementbyid("datatable-responsive").tbodies[0].deleterow(i);
(edit:) rayon's solution more elegant anyway. saves trouble of getting reference tbody.
Comments
Post a Comment