如何在javascript中将按钮动态添加到数组项目列表中-解网

问：

我想将删除按钮添加到数组“lists”的元素中。我的语法应该是正确的，但由于某种原因不起作用。然后，这些按钮将在单击时删除元素。Add 函数正在工作，并且项目显示在无序列表中，从数组中我想在数组的每个成员旁边显示一个删除按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do APP</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <h1>TO DO LIST</h1>
        <input type="text" placeholder="Add Activity" id="event" name="events">
        <button id="add" onclick="Add()">Add</button>
    
            <ul id="sec"> 
                  
            </ul>
        
</body>
<script>
var lists=[];
function Add(){
    var list=document.getElementById("event").value
    var s= lists.includes(list);
    if (s==true){
        alert("Activity already added")
    }else{
        lists.push(list)
        console.log(lists) 
    }
    var output=lists.join('<br/>');
    document.getElementById("sec").innerHTML=output;
}
//delete activity from list
function remove(){

}

//Create buttons for items
function createBtn(){
    var sec= document.getElementById('sec')
    for(var i=0; i<lists.length;i++){
        var butn=document.createElement("button");
        butn.innerHTML=lists[i];
        sec.appendChild(butn);
    }
}

</script>
</html>

JavaScript HTML 数组

var activities = [];

const addActivity = () => {
  var activity = document.getElementById("event").value;

  if (activities.includes(activity)) {
    alert("Activity already added")
  } else {
    activities.push(activity)
    document.getElementById("sec").innerHTML += `<li idx="${activities.length-1}">${activity} <button type="button" onclick="deleteActivity()">Delete</button></li>`
  }
}

const deleteActivity = () => {
  const btn = event.target;
  const index = parseInt(btn.parentElement.getAttribute("idx"), 10);
  activities.splice(index, 1);
  document.getElementById("sec").innerHTML = activities.map((activity, i) => {
    return `<li idx="${i}">${activity} <button type="button" onclick="deleteActivity()">Delete</button></li>`
  });
}

 ul {
   list-style-type: none;
 }
 li {
   margin: 4px;
 }

<h1>TO DO LIST</h1>
<input type="text" placeholder="Add Activity" id="event" name="events">
<button id="add" onclick="addActivity()">Add</button>

<ul id="sec">
</ul>

如何在javascript中将按钮动态添加到数组项目列表中

How do I dynamically add Buttons to a list of Array ITEMS in javascript

评论

评论