Delete element in JS

user_17045229 0
Viewed 176

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?

createelement appendchild button jquery javascript
1 Answers

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";
});
user_59513650
Related