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

Question

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

我jQuery

 jQuery('.hidenone').click(function(){
           jQuery('.apartment-entry-container  input:not(:checked)').each(function() {
                  jQuery(this).parent('.apartment-entry-container').remove();
                });
            }); 

晚上好。我有一个页面上的实体列表，用户将选择他们想要在即将到来的功能中包含的实体。他们将通过点击每个。apartment-entry-container中的复选框来包含这些实体。

之前我需要做的是删除所有没有选中复选框的实体。我的代码删除所有实体检查或不检查。

Answer 1

.parent()仅查看元素的父元素，在您的示例中，这是输入的<td>。您可以使用.closest()来代替它遍历DOM，直到找到匹配。所以使用:

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

jQuery('.hidenone').click(function() {
  jQuery('.apartment-entry-container  input:not(:checked)').each(function() {
    jQuery(this).closest('.apartment-entry-container').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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</span></div>

Answer 2

你试过吗?

https://jsfiddle.net/n28uxcny/

$(".hidenone").click(function() {
    $("input:checkbox:not(:checked)").each(function() {
    $(this).closest('.apartment-entry-container').remove();
});

});

Answer 3

在我看来，这是解决这个问题最干净、最简单的方法。您不必只针对已选中的复选框。相反，你应该瞄准所有的目标并循环使用它们。对于每一个，只需检查this.checked值。如果为假，则将其从列表中删除。易如反掌

这里有一个JS Bin给你: http://jsbin.com/rigufazela/edit?html,console,output

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