如何使用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>