Question

段：

＆＃13;

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

＆＃13;

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

＆＃13;

我想在单击该行上的X时删除一行。我应该添加什么代码呢？

Answer 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

开始

希望这会对你有所帮助。

Answer 2

而不是

$('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>

Answer 3

继续添加具有相同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>

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您应该遵循动态创建的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();**
    });
});

Answer 6

您public Example1(String parameter) { ... System.out.println("parameter : " + parameter); }按钮位于X标记中，并且您正试图绑定td代码上的事件。

你能试试吗

th

Answer 7

试试这个：

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

Answer 8

此函数将找到td cliacked并删除它所属的tr。

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

希望它能解决你的问题。

通过选择其中一个表格行的单元格

8 个答案: