onclick 함수를 사용하여 배열에서 항목을 제거하는 방법은 무엇입니까?

Question

이 코드에서는 항목을 배열로 밀어 넣은 다음 제거하려고합니다. 아래에서 볼 수 있듯이 만들기 버튼을 누르면 빈 입력과 배열에 저장하는 버튼이 생깁니다. 배열에 푸시 된 후보기 버튼이 배열을지나 "편집"및 "삭제"버튼이있는 모든 항목을 표시합니다. 이것은 내 문제가 어디에 놓여있는 ... 배열에 넣어 각 항목에 대해, 그것을 Html에 표시하고 자체 버튼이 있습니다. 특정 삭제 단추를 클릭하면 배열에서 해당 항목을 어떻게 삭제합니까?

//variables 
var create = document.getElementById("create"); 
var view = document.getElementById("view"); 
var display = document.getElementById("display"); 
var text = document.getElementById("text"); 
var push = document.getElementById("push"); 
var arr1 = []; 

//create button 
create.onclick = function() { 
    text.style.display = "inline"; 
    push.style.display = "inline"; 
} 
//push button 
push.onclick = function() { 
    arr1.push(text.value); 
    push.dataset.u_index; 
    console.log(arr1); 
    text.value = ""; 
} 
//view button 
view.onclick = function() { 

for (var i = 0; i < arr1.length; i++) { 
    var disp = document.createElement("div"); 
    disp.innerHTML = arr1[i]; 
    display.appendChild(disp); 
    var edit = document.createElement("button"); 
    var edit_t = document.createTextNode("Edit"); 
    disp.appendChild(edit); 
    edit.appendChild(edit_t); 
    var del = document.createElement("button"); 
    var del_t = document.createTextNode("Delete"); 
    disp.appendChild(edit); 
    edit.appendChild(edit_t); 
    disp.appendChild(del); 
    del.appendChild(del_t); 
} 
//del button 
del.onclick = function() { 

    } 

} 
} 

Answer 1

삭제할 요소를 식별 할 수있는 방법이 필요하므로 삭제 기능과 연결될 수 있습니다. 다음은 데이터 속성을 사용하는 한 가지 가능한 방법을 보여주는 코드입니다.

//variables 
 
var create = document.getElementById("create"); 
 
var view = document.getElementById("view"); 
 
var display = document.getElementById("display"); 
 
var text = document.getElementById("text"); 
 
var push = document.getElementById("push"); 
 
var results = document.getElementById("results"); 
 
var arr1 = []; 
 

 
//create button 
 
create.onclick = function() { 
 
    text.style.display = "inline"; 
 
    push.style.display = "inline"; 
 
} 
 

 
//push button 
 
push.onclick = function() { 
 
    arr1.push(text.value); 
 
    push.dataset.u_index; 
 
    console.log(arr1); 
 
    text.value = ""; 
 
} 
 

 
//view button 
 
view.onclick = function() { 
 
    for (var i = 0; i < arr1.length; i++) { 
 
    var disp = document.createElement("div"); 
 
    disp.innerHTML = arr1[i]; 
 
    results.appendChild(disp); 
 
    var edit = document.createElement("button"); 
 
    var edit_t = document.createTextNode("Edit"); 
 
    disp.appendChild(edit); 
 
    edit.appendChild(edit_t); 
 
    var del = document.createElement("button"); 
 
    var del_t = document.createTextNode("Delete"); 
 
    disp.appendChild(edit); 
 
    edit.appendChild(edit_t); 
 
    disp.appendChild(del); 
 
    del.appendChild(del_t); 
 
    del.setAttribute('data-item-index', i); 
 

 
    //set onclick fn for del button 
 
    del.onclick = function() { 
 
     var itemIndex = this.getAttribute('data-item-index'); 
 
     arr1.splice(itemIndex, 1); 
 
     console.log(arr1); 
 
     results.innerHTML = ''; 
 
     view.click(); 
 
    }; 
 
    } 
 
}

<div id='display'> 
 
    <button id="create">Create</button> 
 
    <div> 
 
    <input type="text" id='text'> 
 
    <button id='push'>Push</button> 
 
    </div> 
 
    <button id='view'>View</button> 
 
    <div id='results'></div> 
 
</div>