Javascript - 동적으로 생성 된 배열에서 특정 요소 제거

Question

사용자가 태그를 생성 할 수있는 페이지가 있습니다 (여기서는 stackoverflow 에서처럼). 그러면이 페이지가 백엔드로 보내 데이터베이스에 저장됩니다. 사용자는 태그를 만들 수 있지만 Submit을 누르기 전에 태그를 제거 할 수 있습니다.

DOM에서 태그는 'x'버튼과 함께 생성됩니다. 'x'버튼은 DOM에서 요소를 제거하지만 배열에서 제거 할 때 문제가 발생합니다. 내가 솔루션에 도달 할 수있는 가장 가까운 것은 this question이었다. 그러나 나는 그것을 꽤 잘 작동시킬 수 없었다.

Here's the codepen

여기

window.tag_array = []; 

$("#addtag").click(function() { 

var tag = $("#input-tag").val(); 

//if tag is empty 
if(!$('#input-tag').val()) { 

    alert("can't be empty"); 

    } else { 
     //put tag.val into an array   
     tag_array.push(tag); 

     //add to DOM 
     $("#tagsbox") 
     .append("<div class='displaytag'><i>"+tag+"</i><input type='hidden' class='tag' value="+tag+"><button onClick='return false;' class='removetag'>x</button></div>"); 

     //reset value in text area to null 
     $("#input-tag").val(""); 

     //remove tag onclick 
     $('.removetag').click(function() { 
      $(this).parent().remove(); //remove tag from DOM 

      //splice from array 
      tag_array.splice(this, 1); //<--HERE IS PROBLEM (i think) 

     }); 


    } //end else 

    alert(tag_array); //check array 
}); 

결과적 접합부는 너무 많은 어레이 아이템을 꺼낸다이다 (I JQuery와 사용하고) 자바 스크립트이다.

또한 유사한 결과로

tag_array.splice(tag_array.indexOf(tag),1); 

을 시도했습니다.

도와주세요! 미리 감사드립니다.

Answer 1

당신은 아마처럼 떨어지게를 사용해야했습니다 태그를 만들 때

솔루션 대신

, 마지막에 추가 .removetag 요소에 클릭 이벤트를 설정 .indexOf()을 사용하여 elem의 인덱스를 얻은 다음 배열을 접합하십시오.

Working demo

Answer 2

splice 부분은 정상입니다. 문제는 클릭 콜백을 .removetag에 너무 많이 추가하고 있다는 것입니다.

새 요소를 추가 할 때마다 페이지에 이미있는 .removetag 개 항목에 다른 click 이벤트를 추가하게됩니다.

$('.removetag').click(function() 

이렇게하면 요소 하나를 클릭 할 때마다 다른 모든 요소가 클릭 콜백을 발생 시키도록 지정되었습니다.

$('.removetag').last().click(function() 

Updated CODEPEN