删除按钮不能删除按钮。它在控制台中响应，但没有别的
Posted
技术标签:
【中文标题】删除按钮不能删除按钮。它在控制台中响应，但没有别的【英文标题】：Delete button is not able to delete buttons. It is responsive in the console but nothing else 【发布时间】：2021-11-27 03:47:58 【问题描述】：在我的代码中使用删除按钮时遇到问题。它不是删除一个对象，而是创建一个新对象。代码在渲染项目功能下。我已经尝试了几件事，但似乎我最大的问题是在 if 语句中放置 rederItems 函数。我还添加了 html 来向您展示它的外观。谢谢！
// selectors
var nameOfItem = document.getElementById("nameOfItem");
var saveOfItem = document.getElementById("nameOfItem");
var shoppingList = document.getElementById("shoppingListContainer");
var nameArray = ["tea","bread","rice"]
// var nameArray = []
var setCart = [];
var getIngredientsForCart = localStorage.getItem
var emptyListText = document.getElementById("emptyList")
var removeButton = document.getElementById('removeItem');
var saveItems = document.getElementById("saveItems");
var cart = document.getElementById("shoppingListContainer")
cart.style.visibility = 'hidden';
saveItems.style.visibility = 'hidden'
saveItems.addEventListener('click', function()
console.log('saved')
setCart.push(entry);
localStorage.setItem('cart', JSON.stringify(newArray));
);
/*
<li class="list-group-item" id="numberOfItems">1</li>
<li class="list-group-item" id="nameOfItem"></li>
<li class="list-group-item" id="removeItem"></li>
*/
// get from local storage
// var food = JSON.parse(localStorage.getItem("Ingredients"))
// console.log(food)
// nameArray = food
// --------------------------------
// render Item function
// --------------------------------
function renderItems()
for (i = 0; i < nameArray.length; i++)
var row = document.createElement("div");
row.setAttribute("class", "row");
var col2 = document.createElement("div");
var col3 = document.createElement("div");
col2.setAttribute("class", "col-8 item-name");
col3.setAttribute("class", "col-2 item-delete");
var newButton = document.createElement('button');
newButton.textContent = 'Delete';
newButton.setAttribute("data-item-idx", i);
newButton.addEventListener('click', function(event)
console.log(event.target.dataset.itemIdx)
var selectedItem = parseInt(event.target.dataset.itemIdx);
if(nameArray.splice(selectedItem, 1))
console.log(nameArray)
renderItems()
)
col2.textContent = nameArray[i];
col3.appendChild(newButton);
row.appendChild(col2);
row.appendChild(col3);
shoppingList.appendChild(row);
// --------------------------------
// shopping Cart function
// --------------------------------
function shoppingCart()
emptyListText.style.visibility = 'hidden';
cart.style.visibility = 'visible';
saveItems.style.visibility = 'visible'
renderItems()
// execute Function
shoppingCart()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<title>Meal Plan</title>
<link rel="stylesheet" href="../css/shoppinglist.css">
</head>
<body>
<div>
<h1>Shopping List</h1>
<a href="../../index.html">search recipes</a>
</div>
<h1 id="emptyList">Cart is Empty :(</h1>
<section id="shoppingListContainer" class="container">
</section>
<button id="saveItems">Save Items</button>
</body>
<!-- <script src="/projects/mealPlan/assets/js/script.js"></script> -->
<script src="../js/shoppingList.js"></script>
</html>【问题讨论】：
【参考方案1】：您在删除时再次调用renderItems()，但您从未真正清除现有呈现的 html。
只需将shoppingList.innerHTML = ""; 添加到renderItems() 函数的开头即可在每次渲染运行时清除html。
【讨论】：
以上是关于删除按钮不能删除按钮。它在控制台中响应，但没有别的的主要内容，如果未能解决你的问题，请参考以下文章
tableView 编辑模式删除按钮（减号）没有响应点击 - 我该如何解决这个问题？