자바 스크립트를 사용하여 jquery의 배열 목록에서 배열 항목을 제거하십시오.

클릭 할 때마다 배열 항목을 제거하고 싶습니다. Onclick의 get_values 버튼은 삭제 버튼/링크 앞에 배열 항목을 표시합니다. 삭제 버튼을 클릭 할 때마다 해당 항목을 제거해야합니다. 전체 항목을 삭제하지만 하나씩 원합니다. Plz 도와주세요. 나는 jquery를 처음 사용합니다.자바 스크립트를 사용하여 jquery의 배열 목록에서 배열 항목을 제거하십시오.

<html> 
<body> 
<div id="array_container"> 
<label>Name</label> 
<input type="text" name="name1" value="" /> 
<label>State</label> 
<input type="text" name="name1" value="" /> 
<label>Color</label> 
<input type="text" name="name1" value="" /> 
<input type="button" name="get_value" id="get_value" value="Get Value"/> 
</div> 
<div id="myDiv"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<!--<script src="../js/jquery.min.js"></script>--> 
<script type="text/javascript"> 
    $("#get_value").click(function() 
    { //causing error here removed the array in name value 
     var ListOfArray = []; 
     var option = $('input:text[name=name1]').map(function() 
     { 
      return $(this).val(); 
     }).get().join(); 
     $("input:text[name=name1]").val(""); 
     ListOfArray.push(option); 
     for (var i= 0; i < ListOfArray.length; i++) 
     { 
      alert(i); //alert(ListOfArray.length); 
      var newList = "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + option + " <br>"; 
      alert(newList); //alert(i); 
     }; 
     document.getElementById('myDiv').innerHTML += newList; 
     return true; 
    }); 
    function removeArray(i) 
    { 
     var ListOfArray = []; 
     alert('after removed array.'+i); 
     ListOfArray.splice(i,1); 
     var newList = ""; 
     //console.log(ListOfArray); 
     for (var i = 0; i < ListOfArray.length; i++) 
     { //You refer to option here for element, which should be replaced by proper index of array 
      alert(ListOfArray.length); alert(i); 
      newList += "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + ListOfArray[i] + " <br>"; 
      alert(i); 
     }; 
     document.getElementById('myDiv').innerHTML = newList; 
     return true; 
    } 
</script> 
</body> 
</html>

출처

2014-09-24 sandy sharma

이동'VAR ListOfArray = [] '전역이다. 간단한 언어로 선언문을 함수 밖에서 한 번만 작성하십시오. – Satpal

안녕하세요, 고맙습니다. –

2 일 전 게시했습니다. [배열 목록에서 항목을 제거하는 방법] (http://stackoverflow.com/questions/25970814/how-to-remove-array-items-from-array-list/25971014) – mithunsatheesh

현재 ListofArray는 onclick 처리기 함수에 대한 로컬 변수이며 removeArray 함수는 외부 범위에서 액세스 할 수 없습니다. 또한 removeArray 안에 새로운 변수를 선언했습니다. ListofArray 변수를 두 함수가 공유하는 단일 인스턴스로 유지해야합니다.

var ListOfArray = []; 
 
$("#get_value").click(function() 
 
{ //causing error here removed the array in name value 
 
\t 
 
\t var option = $('input:text[name=name1]').map(function() 
 
\t { 
 
\t return $(this).val(); 
 
\t }).get().join(); 
 
\t $("input:text[name=name1]").val(""); 
 
\t ListOfArray.push(option); 
 
\t for (var i= 0; i < ListOfArray.length; i++) 
 
\t { 
 
\t \t alert(i); //alert(ListOfArray.length); 
 
\t \t var newList = "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + option + " <br>"; 
 
\t \t alert(newList); //alert(i); 
 
\t }; 
 
\t document.getElementById('myDiv').innerHTML += newList; 
 
\t return true; 
 
}); 
 
function removeArray(i) 
 
{ 
 
\t alert('after removed array.'+i); 
 
\t ListOfArray.splice(i,1); 
 
\t var newList = ""; 
 
\t //console.log(ListOfArray); 
 
\t for (var i = 0; i < ListOfArray.length; i++) 
 
\t { //You refer to option here for element, which should be replaced by proper index of array 
 
\t alert(ListOfArray.length); alert(i); 
 
\t newList += "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + ListOfArray[i] + " <br>"; 
 
\t alert(i); 
 
\t }; 
 
\t document.getElementById('myDiv').innerHTML = newList; 
 
\t return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="array_container"> 
 
<label>Name</label> 
 
<input type="text" name="name1" value="" /> 
 
<label>State</label> 
 
<input type="text" name="name1" value="" /> 
 
<label>Color</label> 
 
<input type="text" name="name1" value="" /> 
 
<input type="button" name="get_value" id="get_value" value="Get Value"/> 
 
</div> 
 
<div id="myDiv"></div>

자바 스크립트를 사용하여 jquery의 배열 목록에서 배열 항목을 제거하십시오.

답변

관련 문제