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も削除してほしいです。したがって、上記の例で、製品＃5を選択して削除した場合、タイトルしか持たないprodbarも一緒に削除する必要があります。

ループを使用して目的を達成できることはわかっていますが、jQueryでよりエレガントなものを望んでいました。基本的に、divに子が1つしかないかどうかを知る必要があります。私はjQueryにかなり慣れていないので、これがセレクターで直接実行できるかどうかはわかりません。何か案は？

4

5 に答える 5

2

クリーンアップ コードを探している場合、以下はすべての prodbar をフィルター処理し、タイトルが唯一の子である場合は削除します。

デモ

$('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

特定の要素に子が1つしかないかどうかを知る必要がある場合は、それを直接テストできます。

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 に答える