單擊表格行刪除按鈕后刪除表格行

Question

解決方案可以使用 jQuery 或普通的 JavaScript。

我想在用戶單擊表格行單元格中包含的相應按鈕后刪除表格行，例如：

<script>
function SomeDeleteRowFunction() {
 //no clue what to put here?
}
</script>

<table>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
</table>

Answer 1

您可以使用 jQuery click而不是使用onclick屬性，請嘗試以下操作：

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

演示

Answer 2

你可以這樣做：

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>

Answer 3

使用純 Javascript：

不需要this傳遞給SomeDeleteRowFunction() ：

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>

點擊功能：

function SomeDeleteRowFunction() {
      // event.target will be the input element.
      var td = event.target.parentNode; 
      var tr = td.parentNode; // the row to be removed
      tr.parentNode.removeChild(tr);
}

Answer 4

以下解決方案工作正常。

HTML：

<table>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
</table>

查詢：

function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

我在http://codebins.com/bin/4ldqpa9上做了垃圾箱

Answer 5

正如@gaurang171 提到的，我們可以使用 .closest() 來返回第一個祖先，或者最接近我們的刪除按鈕，然后使用 .remove() 來刪除它。

這就是我們如何使用 jQuery click 事件而不是使用 JavaScript onclick 來實現它。

 $(document).ready(function(){ $("#myTable").on('click','.btnDelete',function(){ $(this).closest('tr').remove(); }); });

 table{ width: 100%; border-collapse: collapse; } table td{ border: 1px solid black; } button:hover{ cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <th>ID</th> <th >Name</th> <th>Age</th> <th width="1%"></th> </tr> <tr> <td >SSS-001</td> <td >Ben</td> <td >25</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-002</td> <td >Anderson</td> <td >47</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-003</td> <td >Rocky</td> <td >32</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-004</td> <td >Lee</td> <td >15</td> <td><button type='button' class='btnDelete'>x</button></td> </tr>