使用 JavaScript 删除 table 中的每一行

Question

我正在开发一个允许用户单击 table 中一行的删除按钮的应用程序，然后会弹出一个确认模式；最后，当您单击“是”时，您应该能够删除该行。我的代码没有这样做，而是首先删除了 header，我只想删除我指定的行，而不是 header。我用 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 方法）在 table 本身，而不是 table 的 tBody。尝试

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

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

使用 JavaScript 删除 table 中的每一行

Delete each row in a table using JavaScript

html

javascript