Question

我有一个项目列表，我将以表格行的形式呈现给用户。

每行在右上角会有一个小的'x'图像，点击后会产生以下行为：

提示用户（是/取消）是否要删除行
如果用户点击取消没有任何反应，如果是，则删除该行并更新表格。

html看起来像这样：

<html>
    <head>
        <script type="text/javascript" src = jquery.js"></script>
    </head>
    <body>
       <table><tbody>
          <tr>
             <td><div class="delbtn"></div>
                 <div class="rowitem">This one line item</div>
          </tr>
          <tr>
             <td><div class="delbtn"></div>
                 <div class="rowitem">This another line item</div>
          </tr>
          <tr>
             <td><div class="delbtn"></div>
                 <div class="rowitem">blah, blah, blah</div>
          </tr>
          </tbody>
       </table>
       <script type="text/javascript">
           $().ready(function(){
               // What to do ?
            });
       </script>
    </body>
</html>

显然，我必须绑定到div.delbtn模式，但是如何知道单击的行，以及如何从表中删除该行？

Answer 1

$().ready(function() {
   $('.delbtn').click(function() {
       $(this).parent('tr').remove();
   });
});

无需“知道”单击了哪一行，因为每个DOM节点都知道其父节点是谁，并且可以使用.parent（）轻松地移回DOM树，以查找特定的祖先。在这种情况下，您想要对一行进行核对，因此请查找一个祖先<tr>，其中发生了点击所在的节点。

Answer 2

尝试 -

$(document).ready(function() {
    $(".delbtn").click(function() {
        $(this).closest('tr').remove();
    })
});

演示 - http://jsfiddle.net/39pxL/

Answer 3

如果您有多行或打算在页面加载后添加/删除行，则应使用委托。它不会将侦听器绑定到每一行，而只会将一个侦听器绑定到表。在该表标记上设置一个id（例如myTable）并执行：

$(document).ready(function() {
   $('#myTable').delegate('tr .delbtn', 'click', function () {
      $(this).parent('td').parent('tr').remove();
   });
});

另外，不要忘记关闭这些td标签。

从单击行中的元素时删除行

3 个答案: