Javascript 查找带有未选中复选框的元素并删除其祖先

我的HTML

<div class="apartment-entry-container">
  <table>
    <tr>
     <td>
        Description
        <input type="checkbox">
     </td>
    </tr>
  </table>
</div>
<div class="apartment-entry-container">
  <table>
    <tr>
     <td>
        Description
        <input type="checkbox">
     </td>
    </tr>
  </table>
</div>

<div><span class="hidenone">Click Here To Hide</div>

晚上好。 我在一个页面上有一个实体列表，用户将在其中选择他们想要包含在即将到来的函数中的实体。他们将通过单击每个.partment条目容器中的复选框来包含这些实体

然而，我需要做的是删除所有没有复选框的实体。 我的代码正在删除所有选中或未选中的实体

.parent（）

只查看元素的父元素，在您的情况下，这就是输入的

。您可以使用

.nextest（）

，它将遍历DOM直到找到匹配项。因此，请使用：

jQuery(this).closest('.apartment-entry-container').remove();

jQuery（'.hidenone'）。单击（函数（）{
jQuery（'.apartment条目容器输入：未（：选中）'）。每个（函数（）{
jQuery（this）.closest（'.partment entry container'）.remove（）；
});
});

描述
描述
单击此处隐藏
。parent（）
只查看元素的父元素，在您的情况下，这就是输入的
。您可以使用
.nextest（）
，它将遍历DOM直到找到匹配项。因此，请使用：

jQuery(this).closest('.apartment-entry-container').remove();


jQuery（'.hidenone'）。单击（函数（）{
jQuery（'.apartment条目容器输入：未（：选中）'）。每个（函数（）{
jQuery（this）.closest（'.partment entry container'）.remove（）；
});
});

描述
描述
单击此处隐藏
在我看来，这是最干净、最简单的解决方法。您不必只针对选中的复选框。取而代之的是，瞄准所有目标并循环通过它们。对于每一个，只需检查
this.checked
值。如果为false，请将其从列表中删除。轻而易举

这是给你的JS垃圾桶：


描述
描述
单击此处隐藏
$（文档）.ready（函数（）{
$（“.hidenone”）。单击（函数（）{
$（“输入[type=checkbox]”）。每个（函数（i，it）{
如果（！this.checked）{
$（this.parent（）.remove（）；
}
});
});
});
在我看来，这是解决这个问题最干净、最简单的方法。您不必只针对选中的复选框。取而代之的是，瞄准所有目标并循环通过它们。对于每一个，只需检查
this.checked
值。如果为false，请将其从列表中删除。轻而易举

这是给你的JS垃圾桶：


描述
描述
单击此处隐藏
$（文档）.ready（函数（）{
$（“.hidenone”）。单击（函数（）{
$（“输入[type=checkbox]”）。每个（函数（i，it）{
如果（！this.checked）{
$（this.parent（）.remove（）；
}
});
});
});
您试过这个吗


}))
 你试过这个吗


}))
 “我的代码正在删除所有选中或未选中的实体。”根据您发布的代码，我很确定这不会发生。您还忘了关闭span.
$（this）.parent（“.partment entry container”）
不会选择任何内容。复选框的父项是
，而不是DIV。因此，我不知道这段代码如何删除任何内容。“我的代码正在删除所有选中或未选中的实体。”根据您发布的代码，我非常确定不会发生这种情况。您还忘了关闭span.
$（this）.parent（“.partment entry container”）
不会选择任何内容。复选框的父项是
，而不是DIV。因此我不知道这段代码如何删除任何内容。
   <div class="apartment-entry-container">
    <table>
      <tr>
       <td>
          Description
          <input type="checkbox">
       </td>
      </tr>
    </table>
  </div>
  <div class="apartment-entry-container">
    <table>
      <tr>
       <td>
          Description
          <input type="checkbox">
       </td>
      </tr>
    </table>
  </div>

  <div><span class="hidenone">Click Here To Hide</div>


  <script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
    $(document).ready(function() {

      $(".hidenone").click(function() {

        $("input[type=checkbox]").each(function(i, it) {
          if (!this.checked) {
            $(this).parent().remove();
          }
        });

      });

    });
  </script>

$(".hidenone").click(function() {

    $("input:checkbox:not(:checked)").each(function() {

    $(this).closest('.apartment-entry-container').remove();

});