Блог

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

Создание нескольких элементов и удаление одного JavaScript

#javascript #html

#javascript #HTML

Вопрос:

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

Проблема, с которой я столкнулся, заключалась в том, что я создал элемент, затем я бы удалил элемент, используя: element.parentNode.removeChild(element); , но это очистило бы все элементы, которые были созданы в одной и той же переменной.

 var elem = document.createElement("div");               
elem.innerText = "Text";                
document.body.appendChild(elem);

Этот код позволяет создавать элемент нажатием кнопки. Все элементы, которые будут созданы, находятся в переменной «elem». поэтому, когда я удаляю элемент «elem», все элементы очищаются.

Есть ли простой способ удалить один элемент за раз, который был создан процедурно?
Спасибо за любую помощь

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

1. Поместите на них класс, возьмите их все по классу, возьмите последний, а затем удалите его.

2. » это очистило бы все элементы, которые были созданы под одной и той же переменной «. Нет, это очистило бы только последний созданный элемент, в этой переменной вы можете одновременно хранить одно значение, она не может содержать несколько значений.

3. Скриншот был бы отличным, поскольку на этот счет есть разные мнения.

Ответ №1:

Когда вы создаете элементы, укажите a class . Если вы хотите удалить элемент, просто возьмите последний элемент className и удалите его.

Приведенный ниже фрагмент демонстрирует это —

 for(let i = 0; i<5; i  ){
  var elem = document.createElement("div");               
  elem.innerText = "Text "   i;
  elem.className = "added";
  document.body.appendChild(elem); 
}

setTimeout(function(){
  var allDivs = document.getElementsByClassName("added");
  var lastDiv = allDivs.length-1;
  document.body.removeChild(allDivs[lastDiv]);
}, 3000);

Ответ №2:

Я бы, вероятно, использовал querySelector s, чтобы захватить последний элемент:

 // optional
// this is not needed it's just a random string added as
// content so we can see that the last one is removed
function uid() {
  return Math.random().toString(36).slice(2);
}

document.querySelector('#add')
  .addEventListener('click', (e) => {
    const elem = document.createElement('div');
    elem.textContent = `Text #${uid()}`;

    document.querySelector('#container').appendChild(elem);
    // optional - if there are elements to remove, 
    // enable the undo button
    document.querySelector('#undo').removeAttribute('disabled');
  });

document.querySelector('#undo')
  .addEventListener('click', (e) => {
    // grab the last child and remove
    document.querySelector('#container > div:last-child').remove();

    // optional - if there are no more divs we disable the undo button
    if (document.querySelectorAll('#container > div').length === 0) {
      document.querySelector('#undo').setAttribute('disabled', '');
    }
  }); 
 <button id="add">Add</button>
<button id="undo" disabled>Undo</button>
<div id="container"></div>