Javascript jQuery单击除与类链接以外的任何内容

我在上课时遇到了一些麻烦

更新为

单击删除链接时，新的确认链接将滑入视图。如果还单击了确认链接，则应删除表行

如果用户单击除此链接之外的任何其他位置，则通过切换类delete btn show和delete btn hide，链接应滑回视图之外

希望这能澄清问题：）

下面是一个列表。每行都有一个垃圾桶图标，通过切换类打开一个div（.delete btn）。如果一个删除btn是可见的（有class.delete btn show），它应该通过切换class（delete btn show/-hide）隐藏自己，如果单击了其中的链接以外的任何内容。如果单击链接，则应删除该行。我成功地展示了div，但无法达到预期的行为。欢迎帮助：）

（jQuery位于文档就绪函数中）

$（'.删除供应商链接'）。单击（函数（）{
$（this）.parent（）.parent（）.find（'.delete btn'）.toggleClass（'delete-btn-show delete btn hide'）；
});

这是表格结构

<table class="table table-hover" id="curr-suppliers-listing">
  <tbody>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
  </tbody>
</table>

某组织
一些产品或服务
某个家伙
D.O.P。
2011-11-12
某组织
一些产品或服务
某个家伙
D.O.P。
2011-11-12
某组织
一些产品或服务
某个家伙
D.O.P。
2011-11-12

我不知道我是否正确理解了你的要求，但是，检查一下这把小提琴：

如果这不是你想要的，你应该改变你的问题，以提高可读性

@更新

看看这把小提琴：

问题是停止事件的传播，这样它就不会与其他事件冲突。。

---

我不知道这是不是最好的方法。。但是，它是有效的，我认为这就是您想要的

也许您应该使用以下代码：

$('.delete-btn').each(function () {
   $(this).click(function () {
    $(this).parent().parent().remove();
    });
  });

---

对于将“delete btn”作为css类的每个div，它定义了链接到删除行的单击事件的函数。

您可以一直单击气泡直到

，检查$（此）是否为删除btn，并相应地响应：

$("body").on( "click", function(){
    if ( $(this).hasClass("delete-btn") ){
        // Do some deleting, this is a delet button!
    } else {
        // Hide the button, this is some other element
        $(".delete-btn").removeClass("delete-btn-show").addClass("delete-btn-hide");
    }
});

---

这很好。不过，有一件事是，如果类删除btn显示已分配给一个div（即，一个删除按钮已进入视图），则也将删除链接滑入视图的其他链接不应将另一个删除链接滑入视图（如果其中一个已可见）。相反，它应该关闭任何可见的删除链接，然后下次单击垃圾箱图标时，它应该将删除链接滑入视图。换句话说，您一次不能查看多个删除链接。这是一个单行代码：请记住，您应该重构此代码，因为可以做一些改进。。

$('.delete-btn').each(function () {
   $(this).click(function () {
    $(this).parent().parent().remove();
    });
  });

$("body").on( "click", function(){
    if ( $(this).hasClass("delete-btn") ){
        // Do some deleting, this is a delet button!
    } else {
        // Hide the button, this is some other element
        $(".delete-btn").removeClass("delete-btn-show").addClass("delete-btn-hide");
    }
});