0

Been trying to figure out a way to remove the result of my flex box result whenever I press the Reset button. Tried everything I could think of and pretty new to JavaScript so any help and explanations would be really appreciated. I don't know if I'm doing something wrong with my JavaScript file or not calling it properly.

let button = document.getElementById('action');
button.addEventListener('click', function() {
  let birthYear = prompt("what year were you born...Good friend?");
  let ageInDays = (2020 - birthYear) * 365;
  let h1 = document.createElement('h1');
  let textAnswer = document.createTextNode('You are ' + ageInDays + 'days old');
  h1.setAttribute('id', 'ageInDays');
  h1.appendChild(textAnswer);
  document.getElementById('flex-box-result').appendChild(h1);
  console.log(ageInDays);
});

const button2 = document.getElementById('Reset');
button.addEventListener('click', function() {
  document.getElementById('flex-box-result').remove

})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>

<div class="container-1">
  <h2>Challenge 1: How Many Days You Have Lived</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary" id="action">Click Here></button>
    </div>
    <div>
      <button class="btn btn-danger" id="Reset">Reset</button>
    </div>
    <div class="flex-box-container-1">
      <div id="flex-box-result"></div>
    </div>
  </div>
</div>
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
GmmaShark
  • 1
  • 1
  • Does this answer your question? [JavaScript DOM remove element](https://stackoverflow.com/questions/8830839/javascript-dom-remove-element) – Heretic Monkey Sep 09 '20 at 21:36

3 Answers3

1

Just need to target the right button and call the .remove() method:

const button2 = document.getElementById('Reset');
button2.addEventListener('click', function() {
    document.getElementById('flex-box-result').remove()

})
dave
  • 62,300
  • 5
  • 72
  • 93
1

If you want IE support you can use removeChild:

let button = document.getElementById('action');
button.addEventListener('click', function() {
  let birthYear = prompt("what year were you born...Good friend?");
  let ageInDays = (2020 - birthYear) * 365;
  let h1 = document.createElement('h1');
  let textAnswer = document.createTextNode('You are ' + ageInDays + 'days old');
  h1.setAttribute('id', 'ageInDays');
  h1.appendChild(textAnswer);
  document.getElementById('flex-box-result').appendChild(h1);
  console.log(ageInDays);
});

const button2 = document.getElementById('Reset');
button2.addEventListener('click', function() {
  const result = document.getElementById('flex-box-result');
  const child = result.childNodes[0]
  if (child) result.removeChild(child);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>

<div class="container-1">
  <h2>Challenge 1: How Many Days You Have Lived</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary" id="action">Click Here></button>
    </div>
    <div>
      <button class="btn btn-danger" id="Reset">Reset</button>
    </div>
    <div class="flex-box-container-1">
      <div id="flex-box-result"></div>
    </div>
  </div>
</div>
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • This is pretty much what the proposed duplicate already says to do... Do we really need another question and answer pair explaining the same thing? – Heretic Monkey Sep 09 '20 at 21:48
0

In your code for reset and other button you have used the same variable

let button = document.getElementById('action');
button.addEventListener('click', function() {
  let birthYear = prompt("what year were you born...Good friend?");
  let ageInDays = (2020 - birthYear) * 365;
  let h1 = document.createElement('h1');
  let textAnswer = document.createTextNode('You are ' + ageInDays + 'days old');
  h1.setAttribute('id', 'ageInDays');
  h1.appendChild(textAnswer);
  document.getElementById('flex-box-result').appendChild(h1);
  console.log(ageInDays);
});

const button2 = document.getElementById('Reset');
button.addEventListener('click', function() {
  document.getElementById('flex-box-result').remove

})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>

<div class="container-1">
  <h2>Challenge 1: How Many Days You Have Lived</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary" id="action">Click Here></button>
    </div>
    <div>
      <button class="btn btn-danger" id="Reset">Reset</button>
    </div>
    <div class="flex-box-container-1">
      <div id="flex-box-result"></div>
    </div>
  </div>
</div>

let button = document.getElementById('action');
button.addEventListener('click', function() {
  let birthYear = prompt("what year were you born...Good friend?");
  let ageInDays = (2020 - birthYear) * 365;
  let h1 = document.createElement('h1');
  let textAnswer = document.createTextNode('You are ' + ageInDays + 'days old');
  h1.setAttribute('id', 'ageInDays');
  h1.appendChild(textAnswer);
  document.getElementById('flex-box-result').appendChild(h1);
  console.log(ageInDays);
});

const buttonReset = document.getElementById('Reset');
buttonReset.addEventListener('click', function() {
  let x = document.getElementById('flex-box-result')
  console.dir(x);
  x.innerHTML = '';
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>

<div class="container-1">
  <h2>Challenge 1: How Many Days You Have Lived</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary" id="action">Click Here></button>
    </div>
    <div>
      <button class="btn btn-danger" id="Reset">Reset</button>
    </div>
    <div class="flex-box-container-1">
      <div id="flex-box-result"></div>
    </div>
  </div>
</div>
Sunil Choudhary
  • 329
  • 1
  • 6