按 ID 从表和 localStorage 中清除数据。使用按钮答案

【问题标题】：Clear data from the table and localStorage by ID. using the button按 ID 从表和 localStorage 中清除数据。使用按钮
【发布时间】：2021-11-13 16:16:16
【问题描述】：

我需要建议。我有一个表，我在其中存储项目，这些项目存储在 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)
    }
}

【问题讨论】：

请也分享 HTML 代码 - 如果可能，请制作一个代码 sn-p。
ok HTML 代码分享
codepen.io/Ondranemec91/pen/ZEyxBrG

标签： javascript html css dom-events javascript-objects

【解决方案1】：

<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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

据我所知，您可以从 taskArray 中删除您的行，最后像以前一样将其保存在本地。（我可能将本地任务清空并再次保存）

要找出你想删除哪一行，我建议在你的行上设置一个 data-id 属性，当你点击删除按钮时，获取这个 data-id 并根据它删除行。

【讨论】：