Delete each row in a table using JavaScript

Question

I am working on an application that allows a user to click a delete button on a row in a table, then a confirmation modal should pop up; finally when you click yes, you should be able to delete that row. My code doesn't do that, instead it first deletes the header of which I only want to delete the row I specified, not the header. I used bootstrap for the css.

	function deleteRow(r) { 
	var i = 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 the 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 are about to delete one track, this procedure is irreversible.</p>
						<p>Do you want to 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>

What is that r that you're passing to your function? is it the button? — Touffy
– Touffy, Commented Jun 28, 2016 at 11:31

Rayon · Accepted Answer · 2016-06-29 05:29:58Z

Use Element.parentNode.parentNode.remove();

function deleteRow(r) {
  r.parentNode.parentNode.remove();
  //$('#confirm-delete').modal('hide');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="datatable-responsiv">
  <thead align="center">
    <tr>
      <th>
        <input type="checkbox" name="prog" id="check-all" class="flat">
      </th>
      <th>Name of the 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>
  <!--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 are about to delete one track, this procedure is irreversible.</p>
          <p>Do you want to 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>

Touffy · Accepted Answer · 2016-06-28 11:34:23Z

1

Assuming that the argument you're passing to your deleteRow function is a grand-child of the row you want to delete, your problem may be that you're calling deleteRow (the DOM method) on the table itself, not the table's tBody. Try

document.getElementById("datatable-responsive").tBodies[0].deleteRow(i);

(edit:) But Rayon's solution is more elegant anyway. Saves you the trouble of getting a reference to the tbody.

answered Jun 28, 2016 at 11:34

Touffy

6,63626 silver badges31 bronze badges

Collectives™ on Stack Overflow

Delete each row in a table using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related