どのようにjQueryを非表示にするには、空の要素とその親

Question

を操作し、私は次のようにラベル/チェックボックス（ドス）を含むフォーム（TODOリスト）を持っている：

<form class="tasklist"> 
    These are your tasks for today 
    <label> 
     <input class="task" type="checkbox"> 
     This is a task that was added by the user 
    </label> 
    <label> 
     <input class="task" type="checkbox"> 
     This is a task that was added by the user 
    </label> 
</form> 

ユーザーは、それが削除されたタスク（両方をチェックすると次のJavaScriptを使用してDOMからの入力と親ラベル）：

$('input.task').click(function(){ 
    var checkbox = $(this); 
    if (checkbox.prop("checked")) { 
     checkbox.parent().css('text-decoration', 'line-through').fadeOut(1000, function(){checkbox.parent().remove();}); 
    } 
}); 

は、私はそれがより多くのタスク（ラベルの子供を）持っていない一度親フォーム（.tasklist）が消えたいです。私はjQueryの新機能です。さまざまな方法を試しました（.tasklist：空、子（ 'label'））。

EDIT：可能性があります複数のタスクリスト形式。

本当にありがとうございます。

Answer 1

これは、あなたが私たちに与えたコードで動作します、私はちょうどform.children().length == 0を追加しました。

$('input.task').click(function(){ 
    var checkbox = $(this); 
    var form = $(this).parents('form'); 
    if (checkbox.prop("checked")) { 
    checkbox.parent().css('text-decoration', 'line-through').fadeOut(1000, function(){ 
     checkbox.parent().remove(); 
     if(form.children().length == 0) { 
      form.remove(); 
     } 
    }); 
    } 
}); 

JSFiddle Example

Answer 2

入力がラベルの外側にある必要があると思います。
編集：
[OK]を、私はちょうど、彼らはラベルの内側にすることができますが、downvote？本当に？コメントは終わったでしょうが、それは私が推測するように楽しいものではありません。

---

とにかく、あなたがそのようにそれを行うことができます：

if($('.tasklist label').length == 0){ 
    $('.tasklist').remove(); 
} 

Answer 3

（代わりに取り外しの皮を使用して）例
デモ - http://jsfiddle.net/BpFJY/

$('input.task').click(function(){ 
    var checkbox = $(this); 
    if (checkbox.is(':checked')) { 
    checkbox.parent().css('text-decoration', 'line-through').fadeOut(1000, function(){ 
     checkbox.parent().hide(); 
    }); 
    } 
    if ($('.tasklist input:not(:checked)').length == 0) 
     $('.tasklist').hide(); 
}); 

Answer 4

作業..私は、コードを固定して提供してきた第一編集については申し訳ありません、それの例あなたはそう

<form class="tasklist-1"> 
</form> 

<span>Next Form</span> 

<form class="tasklist-2"> 
</form> 

のように、各フォームに番号を追加することができます

これを使用して、フォームが送信されたかどうかを確認します。

$('input.task').click(function(){ 
    var checkbox = $(this); 
    var form = $(this).parents('form'); 
    var fid = form.attr("class").replace("tasklist-",""); 
    if (checkbox.is(':checked')) { 
    checkbox.parent().css('text-decoration', 'line-through').fadeOut(1000, function(){ 
     checkbox.parent().hide(); 
    }); 
    } 
    if ($('.tasklist-' + fid + ' input:not(:checked)').length == 0) 
     $('.tasklist-' + fid).fadeOut(1000); 
}); 

ライブ例 http://jsfiddle.net/RQjhN/1/