堆棧內存溢出
  簡體   English   中英

如何從 DOM 和本地存儲中刪除元素

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

 原文  2020-12-04 12:44:11  6   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