Question

我正在开发一个应用程序，允许用户单击表格中某行的删除按钮，然后会弹出确认模式;最后，当您单击是时，您应该能够删除该行。我的代码不这样做，而是先删除我只想删除我指定的行的标题，而不是标题。我使用bootstrap作为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>

Answer 1

使用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>

Answer 2

假设您传递给deleteRow函数的参数是您要删除的行的大孩子，那么您的问题可能是您正在调用deleteRow（DOM方法））在桌子本身，而不是桌子的tBody。尝试

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

（编辑:)但Rayon的解决方案无论如何更优雅。省去了获取tbody引用的麻烦。

使用JavaScript删除表中的每一行

2 个答案: