How can I clear DOM elements I added other than with location.reload?

I have a Submit button that adds elements to the page and a Reset button to clear those elements and let the user try something else. It’s a Guitar Chord naming app. I ended up using:

// Reset button
const userReset = document.getElementById('user-reset');

// Reset button event listener
userReset.addEventListener("click", function (e) {

  location.reload();

  e.preventDefault();
})

I did not like that solution but it worked. But I’ve since added a select list for users to select an altered guitar tuning and the notes for the tuning is added to the page, which is then used for the calculations in my script.js file. The problem with the reload() function is that it wipes the selected tuning out, and the notes associated with it, so the user has to select their tuning again for the next chord. That would be annoying if you have a lot of chords.

I tried loading the tuning into localStorage and then retrieving it but that did not work. FYI, I need the guitar chord information to be cleared or the next submit fails.

How else can I clear the DOM of what I wrote to it? Or is there something else I need to do with local storage?

  1. Here is a link to my repo.
  2. Here is the live version.

Please disregard the 7 for loops and the 3 forEach methods. I have the functionality - I’ll clean up the mess later. Any help would be appreciated!

1 Like

This stackoverflow link seems to answer your question. I haven’t tested it, but a good place to start looking: javascript - Remove DOM in react.js, - Stack Overflow.

Alternately, if you just need something out of the way, you can use display: none
CSS property, which hides an element and prevents it from taking up any space.

1 Like

Why can’t you reset/clear the specific DOM elements that need to be cleared?

For the form elements, you can switch the type attribute on the button to reset and it will clear the input element (i.e. the notes-form input elements).


Seem like the type of app that would be better suited for a view library (React, Vue, Svelte, etc.)

1 Like

Well, I’m not using react but I’ll look into removing the elements somehow.

I tried to just set all the elements to “” but that did not work, though that was when I was in the early stages of this project. I can try that again.

One option you might consider is to use a data attribute on all output nodes and give them all the same value. That way you can loop all the output DOM elements with that attribute and reset their content. Just so you do not have to target the specific DOM elements using individual ids or classes.

BTW, you can’t use preventDefault if you want to use the reset type on the button.

BTW, you can’t use preventDefault if you want to use the reset type on the button

I’m not using a reset type - didn’t even know there was such a thing.

Let me look into data attributes - thanks!

I’m not adding HTML, I’m adding textContent - but let me look into changing that

I would suggest changing the title of your question then. If you want to remove a Dom element then you use the remove method. But it sounds like that’s not what you’re trying to do then.

That would depend on whether you want to remove the elements or keep them and just clear their content. But if you do want to remove the elements you may have to specifically remove them instead of clearing the parent as the parent might have other content/child elements (so just clearing the parent won’t work).

In any case, the point remains the same:

  1. Add the data attribute to all output nodes.

  2. querySelectorAll all the nodes with the data attribute and loop over them resetting the innerText/innerHTML or removing the node.

Here is a super quick example, I just used empty data attributes as the value doesn’t really matter here (they will just default to an empty string as the value)

I just meant in case you wanted to try the type reset button for it to work you would have to remove preventDefault from the reset handler.

Ok, that’s good info - let me look at all of that - thanks!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.