Блог

Главная - Вопросы по программированию - Как удалить все динамически созданные элементы с помощью кнопки

Как удалить все динамически созданные элементы с помощью кнопки

#javascript #html

#javascript #HTML

Вопрос:

** Я пытаюсь решить проблему здесь, поэтому могу я спросить, может ли быть ошибка, которую я допустил, потому что она продолжает говорить

ОБНАРУЖЕНА ОШИБКА

 `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

Подробности здесь :

 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>

Я высоко ценю любую помощь, чтобы поблагодарить вас!!

Комментарии:

1. Нет объекта DOM с идентификатором ageInDays .

2. Добро пожаловать в SO. Пожалуйста, отредактируйте вопрос, чтобы включить ориентировочный заголовок, относящийся к вашей проблеме.

3. В вашем html нет элемента с идентификатором «ageInDays». Поэтому getElementById('ageInDays') возвращает null и null.remove(); выдает ошибку.

4. Вам следует изменить заголовок вашего вопроса для большей четкости и наглядности.

Ответ №1:

Вы вызываете

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

Но нет HTML-элемента с таким идентификатором. Я думаю, вы хотели получить этот

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

В этом случае вам нужно добавить атрибут ID, например

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

Тогда должен работать тот же js

Ответ №2:

Вы можете просто использовать querySelectorAll метод для удаления всех ваших agemoto идентификаторов attribute при нажатии на reset кнопку

Поскольку вы загружаете идентификатор agemoto динамически, нам нужно убедиться, что мы удаляем все результаты, соответствующие этому идентификатору.

Для этого нам нужно использовать forEach метод querySelectorAll для удаления вызываемых элементов из DOM.

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

Живая демонстрация

 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>

Ответ №3:

У каждого элемента, который вы пытаетесь удалить в eeset(), должен быть идентификатор ‘ageInDays’

Итак, предполагая, что атрибут h1 set должен был быть ‘ageInDays’ вместо ‘ageMoto’