0

I am coding a to-do list, and I want to delete the items added to the list from the screen and from the local storage. Here is the JS code:


function delete_btn() {
    let all_buttons = document.querySelectorAll(".remove_item");
    all_buttons.forEach((db, i) => {
        db.addEventListener('click', () => {
            del(i);
        })

        function del(i) {
            input_array.splice(i, 1);
            localStorage.setItem("items", JSON.stringify(input_array));
            console.log(localStorage);
            location.reload();

        }}
    )}

My first question: the items get deleted only on the second click and I cannot figure out what triggers the double click and how to change it to a single click?

My second question: in my code, the to-do list is located on the second section which is hidden when the page loads (I use "next" and "back" button to switch between the sections). When I run the above code to delete a to-do entry, the page gets reloaded to update the to-do list on the screen and goes back to the first section after the reload. How can I update the to-do list without reloading the page OR how can I reload the page to update the to-do list and stay on the second section (to-do section)? Thank you!

I found this solution Refresh Part of Page (div) for the reload using JQuery but I wonder if there is a plain JS solution?

Progman
  • 16,827
  • 6
  • 33
  • 48
Eve Larson
  • 11
  • 1
  • Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Also please only ask one question at a time – mplungjan Aug 06 '23 at 18:32
  • 1
    `db.addEventListener('click', () => {` is click `db.addEventListener('dblclick', () => {` is dblclick. I suggest delegation - add the eventListener on the nearest static container – mplungjan Aug 06 '23 at 18:32
  • take click event listener out of the function, this will resolve first issue. But for second one we may need some more code – Rajiv Sharma Aug 06 '23 at 18:35
  • Also there is no reason to reload the page at all. Just re-render the list – mplungjan Aug 06 '23 at 18:57
  • Javascript how to distinguish between mouseDown, click and doubleClick events – Mister Jojo Aug 06 '23 at 22:13

0 Answers0