자바 스크립트에서 무작위 요소 문제를 제거하는 스플 라이스

Question

jQuery를 사용하여 대화 형 장바구니를 만들려고했지만 스플 라이스 문제가 모든 것을 망 쳤습니다. 요소를 직접 삭제할 때 완벽하게 작동하지만, 동적으로 변경하지 않기 때문에 ' 인덱스를 업데이트 한 후에도 배열의 무작위 요소를 삭제하지 않아도됩니다.

<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 : 자신이 해결, 모든 덕분에, 유래는 최고입니다. splice()에 그것은 문제가 아니다 http://jsfiddle.net/ar0zrxwc/

Answer 1

jsfiddle 사용하는

준비, 그것은 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