通过选择表格行的一个单元格来删除表格行答案

【问题标题】：Delete a table row by selecting one of that table row's cell通过选择表格行的一个单元格来删除表格行
【发布时间】：2017-09-01 20:17:00
【问题描述】：

片段：

$(document).ready(function() {
  $('button').click(function() {
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
  });
  $('th').on('click', '#no', function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>X</td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

我希望在单击该行上的 X 时删除该行。我应该添加什么代码来做到这一点？

【问题讨论】：

Remove table row after clicking table row delete button的可能重复

标签： jquery html html-table

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/wfLu3Lzu/

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    $('table').on('click', 'tr #no', function(){
        $(this).closest('tr').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <th>Delete</th>
    <th> Element</th>
</tr>
<tr>
    <td id='no'>
        X
    </td>
    <td>Example</td>
</tr>
</table>
<br>
<button>
More
</button>

事件委托应该从table开始直到tr #no

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

您不断地附加具有相同 ID 的元素，这些元素在绑定事件处理程序后动态插入。

您可以在插入元素时使用事件处理程序轻松创建元素，并使用类进行样式设置而不是重复 ID

$(document).ready(function() {
  $('#no').on('click', function() {
    $(this).closest('tr').remove();
  });
  
  $('button').click(function() {
    var tr  = $('<tr />'),
        td1 = $('<td />', {
          'class' : 'no',
          text    : 'X',
          on : {
            click : function() {
              tr.remove();
            }
          }
        }),
        td2 = $('<td />', {
          text : 'Example'
        });
  
    $('table').append(tr.append(td1, td2))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>
      X
    </td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

【讨论】：

【解决方案3】：

代替

$('th').on('click', '#no', function(){

您应该使用事件委托：

$(document).on('click', '#no', function(){

这是给你的工作演示：

$(document).ready(function() {
  $('button').click(function() {
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
  });
  $(document).on('click', '#no', function() {
    $(this).parent().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Delete</th>
    <th> Element</th>
  </tr>
  <tr>
    <td id='no'>
      X
    </td>
    <td>Example</td>
  </tr>
</table>
<br>
<button>
More
</button>

【讨论】：

【解决方案4】：

您应该遵循动态创建的 html 元素的事件委托。检查我更改的粗体代码。

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    **$(document)**.on('click', ''th' #no', function(){
        **$(this).parent('th:first').remove();**
    });
});

【讨论】：

【解决方案5】：

您的X 按钮位于td 标记中，并且您正尝试在th 标记上绑定事件。

你可以试试这个

$(document).ready(function(){
    $('button').click(function(){
        $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>")
    });
    $('table').on('click', '#no', function(){
        $(this).parent().remove();
    });
});

【讨论】：

【解决方案6】：

试试这个：

$('tr').on('click', '#no', function(){
        $(this).closest('tr').remove();
    });

【讨论】：

【解决方案7】：

此函数将定位被点击的 td 并删除它所属的 tr。

 $("td").click(function(){
  $(this).closest("tr").remove();
 });

希望它能解决您的问题。

【讨论】：

【解决方案8】：

$(document).ready(function(){
    $('button').click(function(){
      $('table').append("<tr><td onclick='removeRow(this)' id='no'>X</td><td>Example</td></tr>");
    });
});
function removeRow($this){
        $($this).parent().remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <th>Delete</th>
    <th> Element</th>
</tr>
<tr>
    <td onclick='removeRow(this);'  id='no'>
        X
    </td>
    <td>Example</td>
</tr>
</table>
<br>
<button>
More
</button>

【讨论】：