Как удалить все ли из ул при повторном нажатии на кнопку

avatar
Luis Gonzalez
8 августа 2021 в 18:07
42
1
-1

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

вот код:

data.cast.forEach((actors)=>{
                const li = document.createElement('li');
                li.innerHTML = 
                `<li>
                   ${actors.actor}: ${ actors.character} 
                </li>`
                cast.append(li)
            })
Источник
3limin4t0r
8 августа 2021 в 18:11
0

Чтобы удалить старые элементы <li>, очистите узел <ul> с помощью cast.innerHTML = "".

Luis Gonzalez
8 августа 2021 в 18:18
0

Не могли бы вы объяснить мне немного лучше, пожалуйста, я немного новичок

Ответы (1)

avatar
chrwahl
8 августа 2021 в 18:39
0

Перед добавлением нового необходимо удалить старое:

var cast = document.getElementById('cast');

var data = {
  cast: [{
    actor: "Act01",
    character: "Char01"
  }, {
    actor: "Act02",
    character: "Char02"
  }]
};

document.getElementById('replace').addEventListener('click', e => {
  // delete the list
  cast.innerHTML = '';
  // insert the new
  data.cast.forEach((actors) => {
    const li = document.createElement('li');
    li.innerHTML = `${actors.actor}: ${ actors.character}`;
    cast.append(li);
  });
});
<ul id="cast">
<li>Old actor: Old charactor</li>
</ul>

<button id="replace">Replace with new</button>