Проблема с удалением случайных элементов в javascript

Question

Я пытаюсь создать интерактивную корзину покупок с помощью jQuery, но проблема сращивания разрушила все, потому что, когда я удаляю элемент напрямую, он отлично работает для меня, но чем я буду динамически меняться, t удаляет случайные элементы в массиве даже после индексов обновлений.

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<div id="myDIV2"></div> 
<div id="myDIV"></div> 
<script> 
var wishlistArray = ["Item1", "Item2", "Item3", "Item4", "Item5"]; 

function wishlist_show() { 

    var wishlistArrayDom = ""; 
    jQuery.each(wishlistArray, function (i, wishlistID) { 

     wishlistArrayDom += '<div><a href="javascript:;" class="rem-from-wishlist" value="' + i + '">Remove(' + wishlistID + ')</a></div>'; 
    }); 

    $('#myDIV').empty(); 
    $('#myDIV').html(wishlistArrayDom); 
    wishlist_update_rem(); 

    console.log('All: ' + wishlistArray.length); 
    console.log('Arr: ' + wishlistArray); 
} 

function wishlist_rem(num) { 
    console.log('Value: ' + $(this).attr('value')); 
    console.log('All: ' + wishlistArray.length); 
    console.log('Arr: ' + wishlistArray); 
    $(this).parent().slideUp("slow", function() { 
     console.log(wishlistArray.splice($(this).attr('value'), 1)); 
     wishlist_show(); 

    }); 
    $('#myDIV2').append('<br>Remove ' + wishlistArray[parseInt($(this).attr('value'))] + ' of element' + +$(this).attr('value')); 
} 

wishlist_show(); 

function wishlist_update_rem() { 
    $(".rem-from-wishlist").unbind("click"); 
    $(".rem-from-wishlist").click(wishlist_rem); 
} 
</script> 

Jsfiddle пример

UPDATE: решаемые себе, спасибо всем, StackOverflow лучше.

Готов использоваться jsfiddle http://jsfiddle.net/ar0zrxwc/

Answer 1

Это не проблема с splice(), это проблема с обзорного из this.

Измените функцию удаления этого:

function wishlist_rem(num) { 

    var idx = parseInt($(this).attr('value'))); 
    $(this).parent().slideUp("slow", function() { 
     wishlistArray.splice(idx, 1)); 
     wishlist_show(); 

    }); 
    $('#myDIV2').append('<br>Remove ' + wishlistArray[parseInt($(this).attr('value'))] + ' of element' + +$(this).attr('value')); 
} 

Answer 2

Ваша проблема заключается в том, что this внутри анимации обратного вызова является родителем элемента щелкнул, который не имеет никакого значения атрибута. Просто определите переменную в той же точке, в которой вы сейчас регистрируете значение индекса.

function wishlist_rem(num) { 
    var index = parseInt($(this).attr('value'),10); 

    $(this).parent().slideUp("slow", function() { 
     console.log(wishlistArray.splice(index, 1)); 
     wishlist_show(); 

    }); 
    $('#myDIV2').append('<br>Remove ' + wishlistArray[parseInt($(this).attr('value'))] + ' of element' + +$(this).attr('value')); 
} 

DEMO