如何在 JavaScript 事件上创建删除按钮

Question

Below is the js code I'm using to add elements to a TO DO List

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 = ''
})

Answer 1

The exact implementation will depend on which element you want removed, but the general idea is to get a reference to the DOM element, and then call .remove() on it. This example removes the last item in the list, if there is one:

 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>

This second example demonstrates how to remove individual items, by attaching a specific remove button to each one as it's generated, with its own click handler:

 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>

Answer 2

this removes an element

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

Answer 3

You can add a remove button by simply appending a button with a remove listener.

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

Here is a typical remove handler:

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

Full demo

 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>

Answer 4

You can create a button the same way you're creating the paragraph element.

// paragraph = ...
// ...
const button = document.createElement('button')
button.innerText = "Remove"
button.onclick = function() { paragraph.remove() }
// add button to the DOM