Delete element in JS

Question

I was trying to prototype a site for a To-Do List to experiment with something new using JavaScript.

function task() {
  //Create checkbox
  var x = document.createElement("INPUT");
  x.setAttribute("type", "checkbox");

  //Create <br>
  lineBreak = document.createElement("br");

  //Create <p> element
  var todo = document.createElement("p");

  //Insert in <p> the text in the input box
  todo.innerText = document.getElementById("task").value;

  //Create the <p>checkbox+text</p><br> on every botton click
  return document.body.appendChild(x) + document.body.appendChild(todo) + document.body.appendChild(lineBreak);

  document.querySelector('#reset').addEventListener('click', () => {
    document.getElementById('reset').clicked
  });
}

//Show Reset button on task generated
document.querySelector('#go').addEventListener('click', () => {
  document.getElementById("reset").style.visibility = "visible";
});

p {
  display: inline;
}

img {
  width: 30px;
  display: inline;
}

#reset {
  visibility: hidden;
}

<h1>To-Do List</h1>
<input type="text" placeholder="Write a Task" id="task"><button id="go" onclick="task()">GO</button>
<hr>

<body>
  <section>
    <button id="reset">RESET</button>
  </section>
</body>

As you can see from the code and the indicated if statement I was able to generate for each click on the go button (defined in HTML) new <p></p>. It successfully generates a checkbox, next to a text typed in a text box and then wraps with the <br>.

I was trying to eliminate the elements generated by pressing the reset button, but despite having tried several solutions the only one that seems to work is the one that deletes all the contents of the body.

Could you suggest a solution to allow it to work?

document.getElementById('reset').clicked will always return undefined. I don't see your setting it anywhere. You provably meant to attach a click hander instead? — Ruan Mendes
– Ruan Mendes, Commented Oct 26, 2021 at 13:17
I want to clear all <p> elements generated with the click of the reset button. Reset button is defined in the html in this way: <button id="reset">RESET</button> — HoneyGrim
– HoneyGrim, Commented Oct 26, 2021 at 13:28
Did you try attaching a click handler like I suggested above? I think it's clear that you're trying to remove an HTML element when you click a button? — Ruan Mendes
– Ruan Mendes, Commented Oct 26, 2021 at 13:33
I think I'm not understanding, this is the codepen of the work codepen.io/honeygrim/pen/eYEvgQb — HoneyGrim
– HoneyGrim, Commented Oct 26, 2021 at 13:40
You never sent a link to the running code. Did you even read the article I posted? An example within StackOverflow is much easier to deal with. I will move your external link to your question so that others can try to help. I, myself, have already dedicated too much time to one question. — Ruan Mendes
– Ruan Mendes, Commented Oct 26, 2021 at 13:50

phentnil · Accepted Answer · 2021-10-26 16:50:18Z

1

Just make the adjustments to your javascript code with the following steps and it should work as your expectation:

Steps to fix the code:

Step 1: AddEventListener should be called before return so it would be called whenever the task() is executed with the click of the Go button.

Step 2: Firstly, remove the className "go-element" from the previously added elements if they exist.

Step 3: Add the class "go-element" to newly added elements so they can be identified easily while resetting them.

Step 4: on reset click, it should remove all the elements with the class "go-element"

Note: If you just want to remove all the elements which are added through the Go button, just skip step 2. Also, to simplify you can wrap your all elements in a div element and just follow all the steps as shown above with the div instead of elements.

function task() {
  // Step 2: removing go-element class from previously added elements
  const elements = document.getElementsByClassName("go-element");
  while(elements.length > 0) {
    elements[0].classList.remove("go-element");
  }

  // Step 3: add the class name to new elements
  //Create checkbox
  var x = document.createElement("INPUT");
  x.setAttribute("type", "checkbox");
  x.classList.add("go-element"); //         step 3
  //Create <br>
  lineBreak = document.createElement("br");
  lineBreak.classList.add("go-element"); // step 3
  //Create <p> element
  var todo = document.createElement("p");
  todo.classList.add("go-element"); //      step 3
  //Insert in <p> the text in the input box
  todo.innerText = document.getElementById("task").value;

  // Step 1: moved this code before return so it will execute
  document.querySelector('#reset').addEventListener('click', () => {  
    // Step 4: removing elements with class name "go-element" 
    const elements = document.getElementsByClassName("go-element");
    while (elements.length > 0) {
      elements[0].parentNode.removeChild(elements[0]);
    }
  });

  //Create the <p>checkbox+text</p><br> on every botton click
  return document.body.appendChild(x) + document.body.appendChild(todo) + document.body.appendChild(lineBreak);
}

//Show Reset button on task generated
document.querySelector('#go').addEventListener('click', () => {
  document.getElementById("reset").style.visibility = "visible";
});

edited Oct 26, 2021 at 16:50

phentnil

2,3542 gold badges16 silver badges22 bronze badges

answered Oct 26, 2021 at 14:39

Code Runner

1,0381 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HoneyGrim Over a year ago

Thank you it works. Could you tell me why it works with the "go-element" variable even if it's not declared anywhere? If I try to change it with just "go" it just deletes the phrases and not the checkboxes.

Code Runner Over a year ago

It is just a class to identify that which elements were added when the user pressed the go button. In CSS, even if class is not declared, you can use it unless you are going to use that class to define style for element(s). for the checkbox issues check that i have added todo.classList.add("go-element"); for all element. If you change it to "go" then you have to change it "go-element" to "go" for all elements. Otherwise, it would not remove the elements with the "go" because it is checking for "go-element" in step4 to remove the elements.

Collectives™ on Stack Overflow

Delete element in JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related