JavaScriptを使用してテーブル内の各行を削除する

Question

ユーザーが表の行の削除ボタンをクリックすると、確認モーダルがポップアップするようなアプリケーションで作業しています。最後に「はい」をクリックすると、その行を削除できるはずです。私のコードはそれをしません、代わりに最初に私が指定した行を削除するだけのヘッダーを削除するヘッダーではなく削除します。私はCSSのためのブートストラップを使用しました。あなたはdeleteRow関数に渡している引数がしたい行の壮大-子であると仮定すると

\t function deleteRow(r) { 
 
\t var i = r.parentNode.parentNode.rowIndex; 
 
\t \t document.getElementById("datatable-responsive").deleteRow(i); 
 
\t \t 
 
\t \t 
 
\t \t $('#confirm-delete').modal('hide'); 
 
\t \t 
 
\t }

<table id="datatable-responsiv"> \t 
 
    <thead align="center"> 
 
     <tr> 
 
\t \t <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"> 
 
\t <td class="a-center btnDelete" data-id="1"> 
 
    <input type="checkbox" class="flat" name="table_records"> 
 
    </td> 
 
\t <td>John </td> 
 
\t <td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td> 
 
\t <td> \t \t \t \t \t \t 
 
    <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> 
 
\t \t <tr class="odd pointer"> 
 
\t \t <td class="a-center btnDelete" data-id="2"> 
 
     <input type="checkbox" class="flat" name="table_records"> 
 
      </td> 
 
\t \t \t <td>James</td> 
 
\t \t <td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td> 
 
\t \t \t \t \t \t 
 
\t \t <td> \t \t \t \t \t \t 
 
      <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> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t 
 

 
\t \t \t \t 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t \t </table> 
 

 

 

 
<!--model--> 
 
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
\t \t \t <div class="modal-dialog"> 
 
\t \t \t \t <div class="modal-content"> 
 
\t \t \t \t 
 
\t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
\t \t \t \t \t \t <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t <p>You are about to delete one track, this procedure is irreversible.</p> 
 
\t \t \t \t \t \t <p>Do you want to proceed?</p> 
 
\t \t \t \t \t \t <p class="debug-url"></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
\t \t \t \t \t \t <button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

削除するには、あなたの問題があなたの呼び出しである可能性がありますg deleteRow（DOMメソッド）をテーブルのtBodyではなくテーブル自体に追加します。試してみてください

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

（編集:)しかし、レーヨンの解決策はとにかくよりエレガントです。 tbodyへの参照を取得する手間を省きます。

Answer 2

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