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">&times;</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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -