Блог

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

Как создать кнопку удаления для события JavaScript

#javascript

#javascript

Вопрос:

Ниже приведен код js, который я использую для добавления элементов в список ДЕЛ

 let addButton = document.getElementById('sub-btn');
let listContainer = document.getElementById('items');
let inputField = document.getElementById('sub');
let rmvButton= document.getElementById('rmv');

//adds items to list after clicking button
addButton.addEventListener('click', function(){
    var paragraph = document.createElement('p');
    paragraph.classList.add('paragraph-style')
    paragraph.innerText = inputField.value;
    listContainer.appendChild(paragraph);
    inputField.value = ''
})

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

1. Пожалуйста, уточните назначение кнопки удаления?

Ответ №1:

Вы можете добавить кнопку удаления, просто добавив кнопку с помощью remove listener.

 const remove = document.createElement('button');
remove.textContent = 'Remove';
remove.addEventListener('click', handleRemove);

Вот типичный обработчик удаления:

 const handleRemove = e => {
  const item = e.target.closest('.item');
  item.parentElement.removeChild(item);
};

Полная демонстрация

 const addButton = document.getElementById('sub-btn');
const listContainer = document.getElementById('items');
const inputField = document.getElementById('sub');
const rmvButton = document.getElementById('rmv');

const handleRemove = e => {
  const item = e.target.closest('.item');
  
  // Remove the listener, to avoid memory leaks.
  item.querySelector('.remove-btn')
    .removeEventListener('click', handleRemove);
  
  item.parentElement.removeChild(item);
};

// Adds items to list after clicking button
addButton.addEventListener('click', e => {
  const item = document.createElement('div');
  const paragraph = document.createElement('div');
  const remove = document.createElement('button');
  
  item.classList.add('item');
  paragraph.classList.add('paragraph-style');
  remove.classList.add('remove-btn');
  
  paragraph.textContent = inputField.value;
  remove.textContent = 'Remove';
  
  remove.addEventListener('click', handleRemove);
  
  item.append(paragraph);
  item.append(remove);
  listContainer.append(item);
  
  inputField.value = '';
}) 
 .items {
  display: flex;
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 6em;
  grid-column-gap: 1em;
  margin-bottom: 0.667em;
  align-items: center;
}

.paragraph-style {
  font-style: italic;
} 
 <div>
  <input type="text" id="sub" />
  <button id="sub-btn">Add</button>
</div>
<hr />
<div id="items"></div>

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

1. спасибо, я уже получил сложную часть CSS, этот ответ мне очень помог!

2. @KivaGordon Рад слышать. Вы были действительно близки. Как я уже отмечал, важно отсоединить слушателей перед удалением элементов. Это не так важно для небольших приложений, но в долгосрочной перспективе влияет на гораздо большие приложения.

3. Я раньше не думал об удалении прослушивателя, как это повлияет на мой код, если я этого не сделаю?

4. @KivaGordon если вам не удастся отсоединить слушателей, особенно если вы добавите более тысячи задач, а затем удалите их все … будет зависать тысяча функций. Похоже на висячие указатели. Единственный способ очистить их — обновить страницу. Слишком много неиспользуемых переменных / функций увеличивают использование памяти приложения.

Ответ №2:

это удаляет элемент

 var myobj = document.getElementById("demo");
myobj.remove();

Ответ №3:

Точная реализация будет зависеть от того, какой элемент вы хотите удалить, но общая идея состоит в том, чтобы получить ссылку на элемент DOM, а затем вызвать .remove() его. В этом примере удаляется последний элемент в списке, если он есть:

 let addButton = document.getElementById('sub-btn');
let listContainer = document.getElementById('items');
let inputField = document.getElementById('sub');
let rmvButton= document.getElementById('rmv');

//adds items to list after clicking button
addButton.addEventListener('click', function(){
    var paragraph = document.createElement('p');
    paragraph.classList.add('paragraph-style')
    paragraph.innerText = inputField.value;
    listContainer.appendChild(paragraph);
    inputField.value = ''
})

rmvButton.addEventListener('click', function() {
  const lastItem = listContainer.children[listContainer.children.length-1];
  if (lastItem) {lastItem.remove()}
 }) 
 <div id="items">
</div>

<input id="sub" value="item text">

<button id="sub-btn">Add</button>
<button id="rmv">Remove</button>

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

 let addButton = document.getElementById('sub-btn');
let listContainer = document.getElementById('items');
let inputField = document.getElementById('sub');
let rmvButton= document.getElementById('rmv');

//adds items to list after clicking button
addButton.addEventListener('click', function(){
    var paragraph = document.createElement('p');
    paragraph.classList.add('paragraph-style')
    paragraph.innerText = inputField.value;
    
    // create and append a "remove" button to the item
    var rmv = document.createElement('button');
    rmv.innerText="Remove";
    paragraph.appendChild(rmv);
    
    // add a click handler to it which will remove this specific item, `paragraph`:
    rmv.addEventListener('click', function() {
      paragraph.remove();
    });
    
    listContainer.appendChild(paragraph);
    inputField.value = ''
}) 
 <div id="items">
</div>

<input id="sub" value="item text">

<button id="sub-btn">Add</button>

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

1. Причина понижения? Я хотел бы улучшить ответ, если вы можете рассказать мне, что вы нашли в нем менее полезным.

2. О, я вижу, кто-то по какой-то причине отклонил все ответы.

Ответ №4:

Вы можете создать кнопку так же, как вы создаете элемент paragraph.

 // paragraph = ...
// ...
const button = document.createElement('button')
button.innerText = "Remove"
button.onclick = function() { paragraph.remove() }
// add button to the DOM
Метки: