堆栈内存溢出
  繁体   English   中英

如何从 DOM 和本地存储中删除元素

[英]How to delete element from DOM and from local storage

 原文  2020-12-04 12:44:11  2   1    javascript/ jquery

问题描述

我正在用普通的 JavaScript 制作一种“问题控制器”，可以打开和关闭问题。 我可以添加到 DOM 和本地存储，但我不能从 DOM 或本地存储中删除它。

使用普通 JS 或 Jquery 执行此操作的最简单方法是什么，而不必为每个问题“添加/创建新 id”？

这是我的代码（我没有花时间在样式上，也没有制作“验证功能”）：

<body>
  <label for="issue"></label><textarea name="issue" id="description" cols="30" rows="10"></textarea>
  <label for="severity">Choose the Severity:</label>
<select id="severity" name="severity">
  <option value="critical">Critical</option>
  <option value="important">Important</option>
  <option value="casual">Casual</option>
  <option value="minor">Minor</option>
</select>

<label for="assign"></label><input type="text" name="assign" id="assign">

<button id="createButton">Create issue</button>

<div class="box" id="box"></div>
</body>

这是我的 JS：

const ADD_ISSUE_TO_STORAGE = 'keyIssue'

const ELEMENTS = {
    description : document.getElementById('description'),
    severity : document.getElementById('severity'),
    assign : document.getElementById('assign'),
    createButton : document.getElementById('createButton'),
    issueToDo: document.getElementById('issueToDo'),
    severityKind: document.getElementById('severityKind'),
    assignedFor: document.getElementById('assignedFor'),
}
// ------- Event listeners -----//

ELEMENTS.createButton.addEventListener('click', function (){
       createIssue() 
})
// --------- functions ---//

function createIssue(){ 

         issue = { 
            issueDiscription: ELEMENTS.description.value,
            issueSeverity: ELEMENTS.severity.value,
            issueAssign: ELEMENTS.assign.value,
        }
            const isValid = validations(issue)
                if (isValid) {
                    addToStorage(issue);
                    showIssue(issue);
                    clearForm()
            }
}

function validations(issue){
    return true
}

function clearForm(){
    ELEMENTS.description.value = ''
    ELEMENTS.severity.value = ''
    ELEMENTS.assign.value =''
}

function addToStorage(issue){ 
    issueInStorage = JSON.parse(window.localStorage.getItem(ADD_ISSUE_TO_STORAGE)) || []
    issueInStorage.push(issue)
    window.localStorage.setItem(ADD_ISSUE_TO_STORAGE, JSON.stringify(issueInStorage))
}


function deleteIssue(e){
document.getElementById.getElementById('delete').addEventListener('click', localStorage.removeItem(e))
     $(document).ready(function(){
        $("#issue").css("display", "none");
       });
    }

 function showIssue(issue){
   const str =  `<div id='issue'>
                    <h1 id="issueToDo">${description.value}</h1>
                    <h3 id="severityKind">${severity.value}</h3>
                    <h4 id="assignedFor">${assign.value}</h4>
                    <button  id ='delete' onclick='deleteIssue(e)'> Delete Issue </button>
                </div>`
    document.getElementById('box').innerHTML += str 
 }

Thanks

1 个解决方案

解决方案1
 -1  2020-12-04 14:25:22

尝试以下操作（我将每个问题都用自己的密钥添加到本地存储，然后将密钥传递给 removeItem - 密钥将是密钥问题+唯一问题编号）

唯一的问题编号是问题描述的 id（我将其传递给单击按钮事件处理程序和 deleteIssue()）

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>

    
    
        <body>
            <label for="issue"></label><textarea name="issue" id="description" cols="30" rows="10"></textarea>
            <label for="severity">Choose the Severity:</label>
          <select id="severity" name="severity">
            <option value="critical">Critical</option>
            <option value="important">Important</option>
            <option value="casual">Casual</option>
            <option value="minor">Minor</option>
          </select>
          <label for="assign"></label><input type="text" name="assign" id="assign">

    <button id="createButton">Create issue</button>

    <div class="box" id="box"></div>
</body>

    <script>
        const ADD_ISSUE_TO_STORAGE = 'keyIssue'
        let issueNum = 0;
const ELEMENTS = {
    description : document.getElementById('description'),
    severity : document.getElementById('severity'),
    assign : document.getElementById('assign'),
    createButton : document.getElementById('createButton'),
    issueToDo: document.getElementById('issueToDo'),
    severityKind: document.getElementById('severityKind'),
    assignedFor: document.getElementById('assignedFor'),
}
// ------- Event listeners -----//

ELEMENTS['createButton'].addEventListener('click', function (){
       createIssue(); 
})
// --------- functions ---//

function createIssue(){ 

         issue = { 
            issueDiscription: ELEMENTS.description.value,
            issueSeverity: ELEMENTS.severity.value,
            issueAssign: ELEMENTS.assign.value,
        }
            const isValid = validations(issue)
                if (isValid) {
                    addToStorage(issue);
                    showIssue(issue);
                    clearForm()
            }
}

function validations(issue){
    return true
}

function clearForm(){
    ELEMENTS.description.value = ''
    ELEMENTS.severity.value = ''
    ELEMENTS.assign.value =''
}

function addToStorage(issue){ 

    window.localStorage.setItem(ADD_ISSUE_TO_STORAGE+  (++issueNum),issue)
    console.log(localStorage);
}

function deleteIssueElements (obj)
{
    console.log("in delete");
    localStorage.removeItem(ADD_ISSUE_TO_STORAGE+obj);
   document.getElementById('box').removeChild(document.getElementById('issue'));
}
function deleteIssue(obj){
document.getElementById('delete').addEventListener('click', deleteIssueElements(obj))
    }

 function showIssue(issue){
   const str =  `<div id='issue'>
                    <h1 id="${issueNum}">${description.value}</h1>
                    <h3 id="severityKind">${severity.value}</h3>
                    <h4 id="assignedFor">${assign.value}</h4>
                    <button  id ='delete' onclick='deleteIssue("${issueNum}")'> Delete Issue </button>
                </div>`
    document.getElementById('box').innerHTML += str 
 }

    </script>
</html>

已编辑问题描述必须是唯一的，否则有两个具有相同描述的问题是没有用的。 所以我在我的逻辑中使用问题描述作为相关 div 和 localStorage 键的键

JavaScript

    const ELEMENTS = {

    description : document.getElementById('description'),
    severity : document.getElementById('severity'),
    assign : document.getElementById('assign'),
    createButton : document.getElementById('createButton'),
    issueToDo: document.getElementById('issueToDo'),
    severityKind: document.getElementById('severityKind'),
    assignedFor: document.getElementById('assignedFor'),
}
// ------- Event listeners -----//

ELEMENTS['createButton'].addEventListener('click', function (){
       createIssue(); 
})
// --------- functions ---//

function createIssue(){ 

         issue = { 
            issueDiscription: ELEMENTS.description.value,
            issueSeverity: ELEMENTS.severity.value,
            issueAssign: ELEMENTS.assign.value,
        }
            const isValid = validations(issue)
                if (isValid) {
                    addToStorage(issue);
                    showIssue(issue);
                    clearForm()
            }
}

function validations(issue){
    // case the user did not enter any description or spaces
    if ( issue.issueDiscription.trim() === '')
     {
         alert ("Issue description is required");
        return false;
     }
     for (let i in localStorage) {
         if (i == issue.issueDiscription) {
             window.alert("This entry already exists (duplicate issue description)");
             return false;
         } 
     }
    return true;
}

function clearForm(){
    ELEMENTS.description.value = ''
    ELEMENTS.severity.value = ''
    ELEMENTS.assign.value =''
}
// Issue description will be the key for each issue (Because the issue description has to be unique)
function addToStorage(issue){ 
    window.localStorage.setItem(issue.issueDiscription,issue)
}

function deleteIssueElements (issueDescription)
{
    localStorage.removeItem(issueDescription);
   document.getElementById('box').removeChild(document.getElementById(issueDescription));
}
function deleteIssue(issueDescription){
    document.getElementById('delete').addEventListener('click', deleteIssueElements(issueDescription))
}

 function showIssue(issue){
     // The id of the div will be the issue description as this always has to be unique
   const str =  `<div id='${description.value}'>
                    <h1 id="issueToDo">${description.value}</h1>
                    <h3 id="severityKind">${severity.value}</h3>
                    <h4 id="assignedFor">${assign.value}</h4>
                    <button  id ='delete' onclick='deleteIssue("${description.value}")'> Delete Issue </button>
                </div>`
    document.getElementById('box').innerHTML += str 
 }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从本地存储中删除数组中的一个元素？ 如何从本地存储中的数组删除对象？ 如何从 jquery object 中删除 dom 元素 如何从 Selenium Java 中删除 DOM 元素 通过输入值从本地存储中删除数组中的元素 如何从本地存储中删除书签元素 如何从 Vuejs 的本地存储中检索元素？ 从本地存储中的阵列将列表打印到DOM 如何删除存储在本地存储中的数组元素 如何使用委派从本地存储中删除项目？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM