Reputation: 19

How to remove all dynamically created elements with a button

**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!!

Upvotes: 0

Answers (3)

Always Helping

Reputation: 14570

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>

Upvotes: 1

tipsyBit

Reputation: 29

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’

Upvotes: 1

B''H Bi'ezras -- Boruch Hashem

Reputation: 1

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

Upvotes: 2

How to remove all dynamically created elements with a button

Answers (3)

Related Questions