Добавление ссылки после удаления в последнем дочернем элементе

Question

Я хочу добавить ссылку add в последнем дочернем классе: (('.' + change_class + ':last .adda .mediumCell:first')) после удаления, но если вы удалите последний chil (44444444444444444444), это не добавит в последнем дочернем значении 3333333333333333333 и удалит с той же строкой, как это можно исправить?

Пример из моего кода: http://jsfiddle.net/LX49c/1/

$('.remove').live('click',function (e) {
    e.preventDefault();

    var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
    var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
    var get_class = $(this).closest('.' + change_class).attr('id');
            $('#' + get_class).fadeOut('slow', function () {
                $(this).remove();
            });
            $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 
});

Answer 1

Переместите append(...) в пределах функции .fadeOut. Смотри http://jsfiddle.net/LX49c/2/

$('.remove').live('click',function (e) {
    e.preventDefault();

    var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
    var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
    var get_class = $(this).closest('.' + change_class).attr('id');
            $('#' + get_class).fadeOut('slow', function () {
                $(this).remove();
                $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>');
            });
            //Moved from here
});

Альтернативный метод - удалить класс перед добавлением: http://jsfiddle.net/LX49c/4/

....
var get_class = $(this).closest('.' + change_class).attr('id');
        $('#' + get_class).fadeOut('slow', function () {
            $(this).remove();
        });
        $("#" + get_class).removeClass(change_class);
        $('.' + change_class + ':last(-1) .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 

<ч /> Вы делаете несколько дорогих вызовов JQuery. Я бы предложил заменить следующий код:

var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
//Replace the previous by:
var className = $(this).closest('.find_input').find('div').attr('class').split(" ");
var change_class = className[0];
var url = className[1];

Answer 2

Вы добавляете ссылку перед удалением. Вы запускаете анимацию, которая удалит элемент по завершении, но анимация не запустится, пока вы не выйдете из функции.

Если вы хотите добавить после удаления, вы должны поместить этот код в обработчик событий, который выполняется после завершения анимации:

$('.remove').live('click',function (e) {
  e.preventDefault();

  var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
  var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
  var get_class = $(this).closest('.' + change_class).attr('id');
  $('#' + get_class).fadeOut('slow', function () {
    $(this).remove();
    $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 
  });
});