如何使用按钮删除所有动态创建的元素

Question

**I am trying to figure out a challenge here so may i ask if what could be the error I made because it keeps saying **我想在这里找出一个挑战，所以我可以问一下我犯的错误是什么，因为它一直在说

ERROR FOUND发现错误

`Uncaught TypeError: Cannot read property 'remove' of null     at eeset (script.js:13)     at `HTMLButtonElement.onclick (index2.html:20) eeset @ script.js:13 onclick @ index2.html:20 ** newbie here

The details are here:详情在这里：

 function ageInDays() { var birthYear =prompt('What year were you born.... Good Friend?'); var agemoto = (2018 - birthYear) * 365; var h1 = document.createElement('h1'); var textAnswer = document.createTextNode('You are ' + agemoto + ' days old'); h1.setAttribute('id', 'agemoto'); h1.appendChild(textAnswer); document.getElementById('flex-box-result').appendChild(h1); } function eeset() { document.getElementById('ageInDays').remove(); }

 .container-1 { border: 1px solid black; }.flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; flex-wrap: wrap; flex-direction: row; justify-content: space-around; }.flex-box-container-1 div{ display: flex; padding: 10px; border: 1px solid black; align-items: center; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="static/style.css"> <title>Javasript on Steroids</title> </head> <body> <div class="container-1"> <h2>Challenge 1: Your Age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary" onclick="ageInDays()">Click me</button> </div> <div> <button class="btn btn-danger" onclick="eeset()">Reset</button> </div> </div> <div class="flex-box-container-1"> <div id="flex-box-result"></div> </div> </div> <script src="js/script.js"></script> </body> </html>

I highly appreciate any kind of help to Thank you!!我非常感谢任何形式的帮助谢谢！

Answer 1

You're calling你在打电话

document.getElementById('ageInDays').remove()

But there is no HTML element with that ID.但是没有具有该 ID 的 HTML 元素。 I think you wanted to get this one我想你想得到这个

 <button class="btn btn-primary" onclick="ageInDays()">Click me</button>

In which case you need to add an ID attribute, like在这种情况下，您需要添加一个 ID 属性，例如

 <button id="ageInDays" class="btn btn-primary" onclick="ageInDays()">Click me</button>

Then the same js should work然后相同的js应该可以工作

Answer 2

You can simply use querySelectorAll method to remove all your agemoto id attribute when you click on reset button当您单击reset按钮时，您可以简单地使用querySelectorAll方法删除所有agemoto id attribute

Since you are loading the id agemoto dynamically so we need to make sure that we remove all the results matching with that id.由于您正在动态加载 id agemoto ，因此我们需要确保删除与该 id 匹配的所有结果。

For this we need to use forEach method querySelectorAll to remove call elements from the DOM.为此，我们需要使用forEach方法querySelectorAll从 DOM 中删除调用元素。

function eeset() {
 document.querySelectorAll('#agemoto').forEach(e => 
 e.parentNode.removeChild(e)); //Remove All results
}

Live Demo现场演示

 function ageInDays() { var birthYear = prompt('What year were you born.... Good Friend?'); var agemoto = (2018 - birthYear) * 365; var h1 = document.createElement('h1'); var textAnswer = document.createTextNode('You are ' + agemoto + ' days old'); h1.setAttribute('id', 'agemoto'); h1.appendChild(textAnswer); document.getElementById('flex-box-result').appendChild(h1); } function eeset() { document.querySelectorAll('#agemoto').forEach(e => e.parentNode.removeChild(e)); }

 .container-1 { border: 1px solid black; }.flex-box-container-1 { display: flex; border: 1px solid black; padding: 10px; flex-wrap: wrap; flex-direction: row; justify-content: space-around; }.flex-box-container-1 div { display: flex; padding: 10px; border: 1px solid black; align-items: center; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="static/style.css"> <title>Javasript on Steroids</title> </head> <body> <div class="container-1"> <h2>Challenge 1: Your Age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary" onclick="ageInDays()">Click me</button> </div> <div> <button class="btn btn-danger" onclick="eeset()">Reset</button> </div> </div> <div class="flex-box-container-1"> <div id="flex-box-result"></div> </div> </div> </body> </html>

Answer 3

Watever element you are trying to remove in eeset() needs to have id as 'ageInDays'您尝试在 eeset() 中删除的 Waterever 元素的 id 必须为 'ageInDays'

So assuming h1 set attribute should have been 'ageInDays' instead of 'ageMoto'所以假设 h1 设置属性应该是 'ageInDays' 而不是 'ageMoto'

如何使用按钮删除所有动态创建的元素

问题描述

3 个解决方案

解决方案1
2 2020-08-21 09:47:30

解决方案2
1 已采纳 2020-08-21 09:47:04

解决方案3
1 2020-08-21 09:50:03

如何使用按钮删除所有动态创建的元素

问题描述

3 个解决方案

解决方案1 2 2020-08-21 09:47:30

解决方案2 1 已采纳 2020-08-21 09:47:04

解决方案3 1 2020-08-21 09:50:03

解决方案1
2 2020-08-21 09:47:30

解决方案2
1 已采纳 2020-08-21 09:47:04

解决方案3
1 2020-08-21 09:50:03