我需要建议。我有一个表，我将项目存储在其中，这些项目存储在localStorage中，然后插入到表中。我需要在列表中设置删除按钮。为了使其工作，当我单击它时，将从localStorage和表中删除给定的行。
let form = document.querySelector("#form-list")
if(localStorage.getItem("task") == null){
var taskArray = []
} else {
taskArray = JSON.parse(localStorage.getItem("task"))
}
form.addEventListener("submit", function(event){
// event.preventDefault()
taskArray.push({
id: uuidv4(),
job: event.target.elements.selected.value,
task: event.target.elements.text.value
})
// Clear the input and select boxes
event.target.elements.selected.value = ""
event.target.elements.text.value = ""
// save localStorage
taskArrayJSON = JSON.stringify(taskArray)
localStorage.setItem("task", taskArrayJSON)
})
const buildTable = function(){
let table = document.getElementById("table")
for(let i = 0; i < taskArray.length; i++){
var row = `<tr>
<td>${taskArray[i].job}</td>
<td>${taskArray[i].task}</td>
<td><button class="btn btn-primary" onclick="deleteButton(this)">Delete</button></td>
</tr>`
table.innerHTML += row
}
}
buildTable(taskArray)
const deleteButton = function(row){
let table = JSON.parse(localStorage.getItem("task"))
localStorage.removeItem("id")
table.splice(row, 1)
localStorage.setItem("task", JSON.stringify(table))
}
//Podle ID najdeme index daného jména a pomocí splice ho odstraníme
const removeTask = function(id){
const index = taskArray.filter(function(nameTask){
return nameTask.id === id
})
if(index > -1){
taskArray.splice(index,1)
}
}
据我所知，您可以从taskArray中删除行，最后像以前一样将其保存在本地。(也许使本地任务为空并再次保存)
要找出你想要删除哪一行，我建议在你的行上设置一个data-id属性，当你点击删除按钮时，获取这个data-id并根据它删除行。
<h1>Table</h1>
<form id="form-list">
<div class="form-group mx-auto col-3" style="margin-top: 2rem;">
<select name="selected" class="form-select">
<option selected>Open this select menu</option>
<option value="Programování">Programování</option>
<option value="Kódování">Kódování</option>
<option value="Meeting">Meeting</option>
</select>
<input type="text" id="text-input" class="form-control mb-3" placeholder="Zadej text" name="text">
<button value="submit" class="btn btn-primary">Add Task</button>
</div>
</form>
<table class="table table-striped">
<tr class="bg-info">
<th>Job</th>
<th>Task</th>
<th>Action</th>
</tr>
<tbody id="table">
</tbody>
</table>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/uuidv4.js"></script>
<script src="js/function.js"></script>
<script src="js/script.js"></script>
<body>
<h1>Table</h1>
<form id="form-list">
<div class="form-group mx-auto col-3" style="margin-top: 2rem;">
<select name="selected" class="form-select">
<option selected>Open this select menu</option>
<option value="Programování">Programování</option>
<option value="Kódování">Kódování</option>
<option value="Meeting">Meeting</option>
</select>
<input type="text" id="text-input" class="form-control mb-3" placeholder="Zadej text" name="text">
<button value="submit" class="btn btn-primary">Add Task</button>
</div>
</form>
<table class="table table-striped">
<tr class="bg-info">
<th>Job</th>
<th>Task</th>
<th>Action</th>
</tr>
<tbody id="table">
</tbody>
</table>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/uuidv4.js"></script>
<script src="js/function.js"></script>
<script src="js/script.js"></script>
</body>
</html>