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