有没有办法在输入年龄后删除结果

Question

每当我按下Reset按钮时，我一直在试图找出一种方法来删除我的灵活框结果。尝试了我能想到的一切，对JavaScript来说都是全新的，所以任何帮助和解释都将不胜感激。我不知道是我的JavaScript文件出了问题还是调用不正确。

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>

Answer 1

只需要瞄准右侧按钮并调用.remove()方法：

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

Answer 2

如果您想要IE支持，可以使用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>

Answer 3

在重置和其他按钮的代码中，您使用了相同的变量

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>