Localstorage and removing elements

I’m trying to create a journal to practice using local storage. I was successful in having it save my input values to local storage and display it on the page. However, I’m having a hard time understanding how to remove each individual item from the page along with its stored value from the local storage.

I have tried setting unique data id values for each new appended element so that the delete button knows which entry I’m referring to. However, I’m getting an error to remove the element.

//------- JOURNAL ENTRIES ---------
const formEl = document.querySelector("#journal-form");
const saveEntry = document.querySelector("#save-entry");
var moodInput = document.querySelector("#mood");
var textBoxEl = document.querySelector("#day-description");
var entryDetails = document.querySelector("#entry-details");
var journal = document.querySelector("#journal");
var entryIdCounter = 0;


var addEntry = function (event) {
    event.preventDefault();

    var moodType = moodInput.value;
    var dayDescription = textBoxEl.value;

    console.log("mood", moodType);
    console.log("description", dayDescription);

    if (moodType && dayDescription) {
        //clear the form by overwriting the input
        moodInput.value = "";
        textBoxEl.value = "";


        var journalEntries = JSON.parse(localStorage.getItem("journalEntries"));
        if(journalEntries === null) {
            journalEntries = [];
        }
        var submitEntry = {
            mood: moodType,
            description: dayDescription
        };

        journalEntries.push(submitEntry);
        localStorage.setItem("journalEntries", JSON.stringify(journalEntries));

        console.log("entries", submitEntry.mood);
    } else {
        alert("Please submit an entry!");
    }

    createEntry();

}

function createEntry() {
    // add in journal section
    var journalEntries = JSON.parse(localStorage.getItem("journalEntries")) || [];
    journal.innerHTML = "";

    console.log("journal entries", journalEntries);

    for (let i = 0; i < journalEntries.length; i++) {

        var entryContainer = document.createElement("div")
        entryContainer.className = "entry";
        entryContainer.style.backgroundColor = "red"
        entryContainer.setAttribute("data-entry-id", entryIdCounter);
        journal.appendChild(entryContainer);

        var deleteBtn = document.createElement("button");
        deleteBtn.id = "deleteBtn";
        deleteBtn.className = "deleteBtn";
        deleteBtn.setAttribute("data-entry-id", entryIdCounter);
        deleteBtn.textContent = "X";
        entryContainer.appendChild(deleteBtn);

        var entryTitle = document.createElement("h2");
        entryTitle.textContent = journalEntries[i].mood;
        entryContainer.appendChild(entryTitle);

        var entryDescription = document.createElement("p");
        entryDescription.textContent = journalEntries[i].description;
        entryContainer.appendChild(entryDescription);
        console.log("Description", entryDescription);

        deleteBtn.addEventListener("click", function(){
            removeEntry(entryId);
        });

        entryIdCounter++;

    }
}

var removeEntry = function(event) {
    var targetEl = event.target;
    if (targetEl.matches("#deleteBtn")) {
        var entryId = targetEl.getAttribute("data-entry-id");
        deleteEntry(entryId);
    }
}

var deleteEntry = function(entryId) {
    var selectedEntry = document.querySelector(".entry[data-entry-id='" + entryId + "']");
    selectedEntry.remove();
}

createEntry();

saveEntry.addEventListener("click", addEntry);

Hi,

It would really help if you could also send your html code and error message that you’re getting.

On deleting the entries from the user interface,
your query is not selecting the element you want to delete. It should be
var selectedEntry = document.querySelector("div[data-entry-id='" + entryId + "']");
or even
var selectedEntry = document.querySelector("[data-entry-id='" + entryId + "']");
(and, hypothetically, if you wanted to get it by class, that would be
var selectedEntry = document.querySelector(".entry");
but that’s not useful here)

On deleting the entries from the local storage,

well, you would need some sort of indicator to know where that entry was, which it appears you do not have. I recommend putting your data entry ids in the object as well somehow (in addEntry). Then, in removeEntry, you would have to search for the id of the object you want to delete and, once you’ve got it, pop() it from that journalEntries array.

Hope this helps