Как скрыть манипулированный пустым элементом jQuery и его родителем - PullRequest
Новая
       7

Как скрыть манипулированный пустым элементом jQuery и его родителем

3 голосов
/ 27 октября 2011

У меня есть форма (список задач), содержащая метки / флажки (задачи) следующим образом: 

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

Когда пользователь проверяет задачу, она удаляется (как входная, так и родительская метка) из DOM, используя следующий Javascript: 

$('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: empty, children ('label'). Size () == 0 и т. Д.)

РЕДАКТИРОВАТЬ: Обратите внимание, что может быть более одной формы списка задач.

Я бы очень признателен за вашу помощь.

Ответы [ 4 ]

2 голосов
/ 27 октября 2011

Это работает с кодом, который вы нам дали, я только что добавил 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 Пример

1 голос
/ 27 октября 2011

Пример (используется скрытие вместо удаления)
Демо - 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();
});
1 голос
/ 27 октября 2011

Я думаю, что входные данные должны быть вне меток.
edit:
Хорошо, я только что проверил, они могут быть внутри меток, но понизить это?В самом деле?Комментарий сделал бы, но я полагаю, это не так весело.

В любом случае вы могли бы сделать это так: 

if($('.tasklist label').length == 0){
    $('.tasklist').remove();
}
0 голосов
/ 27 октября 2011

Извините за первое редактирование. Я исправил код и предоставил, и пример его работы

Вы можете добавить число к каждой форме, например, так: 

<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);
});

Live Example http://jsfiddle.net/RQjhN/1/

...