Как удалить динамически созданный блок?

Question

[bambu4a_1503]

в HTML есть блок

<div id="containertt" style="width: 700px; height: 500px" class="container_wrp">

. Из первой функции, он удаляется.

let containerWRP = document.querySelector(".container_wrp");

jccBtnJap.addEventListener('click', function() {
    //удалям блок и создаем по новому и добавляем новый
    containerWRP.remove();
    let jccDiv = document.createElement('div');
    jccDiv.style.width = '700px';
    jccDiv.style.height = '500px';
    jccDiv.id = 'jap_container';
    jccDiv.classList.add('container_wrp');
    wrpBlock.appendChild(jccDiv); 
  }

А вот со второй функции, когда я блок создаю уже динамически - он не удаляется, а просто создается рядом новый. Как мне его удалить? Вторая функция -

jccBars.addEventListener("click", function () {
    //удалям блок и создаем по новому и добавляем новый
    containerWRP.remove();
    let jccDiv = document.createElement('div');
    jccDiv.style.width = '700px';
    jccDiv.style.height = '500px';
    jccDiv.id = 'stick_container';
    jccDiv.classList.add('container_wrp');
    wrpBlock.appendChild(jccDiv);
  }

Answer 1

[Rsa97]

Так когда вы блок удалили, containerWRP больше ни на что не ссылается. Естетственно, что удалить "ничто" не получается.

Comments

[bambu4a_1503]

Но вот я во второй функции создаю блок и добавляю ему такой же класс, как и в переменной containerWRP. Как мне быть? Как его все же можно удалить?

[Rsa97]

bambu4a_1503, Снова найти. Создали вы блок, хоть и того же класса, но другой.

Answer 2

[Сергей Соколов]

Удалить динамически создаваемый — искать прямо перед удалением.

Вроде бы две функции отличаются только назначаемым id?

const handleClick = id => () => {
  document.querySelector('.container_wrp')?.remove();
  const div = document.createElement('div');
  div.style.width = '700px';
  div.style.height = '500px';
  div.id = id;
  div.classList.add('container_wrp');
  wrpBlock.appendChild(div);
};

jccBtnJap.addEventListener('click', handleClick('jap_container'));
jccBars.addEventListener('click', handleClick('stick_container'));

тут handleClick() возвращает функцию, которая даёт создаваемому элементу переданный id.