1

给定以下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。因此，在上面的示例中，如果选择并删除了 Product #5，我希望将现在只有一个标题的 prodbar 与它一起删除。

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

4

5 回答 5

2

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

演示

$('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();
});
于 2012-05-11T15:42:19.780 回答
1

你可以试试这个：

$(".selected").each(function() {
    if ($(this).siblings(".product:not(.selected)").length == 0) {
        $(this).parent(".prodbar").remove();
    }
});

演示：http: //jsfiddle.net/FaF5t/

于 2012-05-11T15:45:52.040 回答
1

尝试：

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

$(".prodbar").each(function(){
    if($(this).children('.product').length == 0)
        $(this).remove();
});

此外，如果每个产品都有一个关键字（如Product），您可以在不使用的情况下删除组.each()：

$(".prodbar:not(:contains(Product))").remove();

证明：http: //jsfiddle.net/iambriansreed/KeRgq/

于 2012-05-11T15:46:07.237 回答
0

如果您需要知道某个特定元素是否只有一个子元素，您可以直接对其进行测试：

if ($('#selector').children().length <= 1) {
    $('#selector').remove();
};

如果您没有使用唯一的选择器，请务必.each单独测试每个选择器：

$('.selector').each(function(i,el) {
    if ($(this).children().length <= 1) {
        $(this).remove();
    };
};
于 2012-05-11T15:40:21.793 回答
0

这会成功的

$('.selected').remove();

$('.prodbar').each(function(){
    if ($(this).children().length <= 1) {
        $(this).remove();
    }
});

示例：http: //jsfiddle.net/trapper/NMm8P/

于 2012-05-11T15:44:59.623 回答