Javascript 单击表格行删除按钮后删除表格行

Remove table row after clicking table row delete button

提问by like-a-trainee

Solution can use jQuery or be plain JavaScript.

解决方案可以使用 jQuery 或纯 JavaScript。

I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:

我想在用户单击表格行单元格中包含的相应按钮后删除表格行，例如：

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

回答by undefined

You can use jQuery clickinstead of using onclickattribute, Try the following:

您可以使用 jQueryclick而不是使用onclick属性，请尝试以下操作：

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

Demo

演示

回答by Siren

you can do it like this:

你可以这样做：

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

回答by gaurang171

Following solution is working fine.

以下解决方案工作正常。

HTML:

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>

JQuery:

查询：

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

I have done bins on http://codebins.com/bin/4ldqpa9

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

回答by A-Sharabiani

Using pure Javascript:

使用纯 Javascript：

Don't need to pass thisto the SomeDeleteRowFunction():

不需要传递this给SomeDeleteRowFunction()：

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

The onclick function:

点击功能：

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);
}