How to remove all dynamically created elements with a button
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!!
3 answers
solution1
2 2020-08-21 09:47:30
You're calling
document.getElementById('ageInDays').remove()
But there is no HTML element with that ID. 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
<button id="ageInDays" class="btn btn-primary" onclick="ageInDays()">Click me</button>
Then the same js should work
solution2
1 ACCPTED 2020-08-21 09:47:04
You can simply use querySelectorAll method to remove all your agemoto id attribute when you click on reset button
Since you are loading the id agemoto dynamically so we need to make sure that we remove all the results matching with that id.
For this we need to use forEach method querySelectorAll to remove call elements from the 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>
solution3
1 2020-08-21 09:50:03
Watever element you are trying to remove in eeset() needs to have id as 'ageInDays'
So assuming h1 set attribute should have been 'ageInDays' instead of 'ageMoto'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.