jQuery:删除 "almost"空 div

Question

给定以下 html:

<div id='foo'>
  <div class='prodbar'>
    <div class='title'>Group 1</div>
    <div class='product'>Product #1</div>
    <div class='product'>Product #2</div>
    <div class='product'>Product #3</div>
    <div class='product'>Product #4</div>
  </div>
  <div class='prodbar'>
    <div class='title'>Group 2</div>
    <div class='product'>Product #5</div>
  </div>
  <div class='prodbar'>
    <div class='title'>Group 3</div>
    <div class='product'>Product #6</div>
    <div class='product'>Product #7</div>
  </div>
</div>

我有代码将'selected'类添加到任何被单击的产品中。选择某些产品后，用户可以单击一个按钮，将所选产品从屏幕上删除，这很简单:

$(".selected").remove();

现在，如果这清空了产品组，我希望组 div 周围的 div 也被删除。因此，在上面的示例中，如果选择并删除了产品 #5，我希望将现在除了标题之外什么都没有的 prodbar 一起删除。

我知道我可以通过循环完成我想要的事情，但我希望有更 jQuery 优雅的东西。本质上，我需要知道一个 div 是否只有 1 个子元素。我对 jQuery 相当陌生，我不确定这是否可以直接在选择器中实现。有什么想法吗？

Answer 1

如果您正在寻找清理代码，那么下面将过滤所有 prodbar 并删除标题(如果标题是唯一的子项)，

DEMO

$('button').click(function() {

    $('.selected').parent().filter(function() {
       if ($(this).children().not('.selected').length <= 1) { //remove the prodbar
          return true;
       } else { //remove selected alone
          $(this).find('.selected').remove();
          return false;
       }
    }).remove();
});