使用 addeventlistener 删除动态生成的元素

Question

i´m trying to add an eventlistener to a dynamically generated element .我正在尝试将eventlistener器添加到动态生成的元素中。 The listener is supposed to be for the button of the generated div.监听器应该是生成的 div 的按钮。 Every button has a unique id , based on the value entered in the input field.每个按钮都有一个唯一的id ，基于输入字段中输入的值。 Everything is working fine, but the eventlistener doesn´t.一切正常，但eventlistener器没有。

Here is the code:这是代码：

 function updateList() { let listItem = new Object(); listItem.name = document.getElementById('userListItem').value; if (listItem.name.length >= 1) { let timeWhenAdded = new Date(); listItem.timeStamp = `${timeWhenAdded.getDate()}.${timeWhenAdded.getMonth()+1}.${timeWhenAdded.getFullYear()}, at ${timeWhenAdded.getHours()}:${timeWhenAdded.getMinutes()} Uhr`; let newDiv = document.createElement('div'); newDiv.className = 'Item'; newDiv.id = `${listItem.name}Item`; let itemHeading = document.createElement('h2'); let itemDescription = document.createElement('p'); let deleteButton = document.createElement('button'); deleteButton.id = `${listItem.name}RemoveItemButton`; deleteButton.className = `DeleteButton`; newDiv.append(itemHeading, itemDescription, deleteButton); let itemContent = document.createTextNode(listItem.name); itemHeading.appendChild(itemContent); let itemtime = document.createTextNode(`Added on: ${listItem.timeStamp}`) itemDescription.appendChild(itemtime); let itemRemover = document.createTextNode('remove'); deleteButton.appendChild(itemRemover); let bucketListDiv = document.getElementById('bucket-list'); bucketListDiv.appendChild(newDiv); document.getElementById('userListItem').value = ""; } else { alert('Type an item in the input-field'); } } let ItemButton = document.getElementsByClassName('Item'); $(document).on('click', ItemButton, function() { console.log('clicked button'); });

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>This is a list</h1> <div class="userinput"> <input type="text" id="userListItem"> <button id="addButton" onclick="updateList()">add</button> </div> <div id="bucket-list"></div> </body>

The RemoveItemButton is supposed to delete the whole generated div . RemoveItemButton应该删除整个生成的div 。

Answer 1

Target the element you click on instead.而是定位您单击的元素。

 function updateList() { let listItem = new Object(); listItem.name = document.getElementById('userListItem').value; if (listItem.name.length >= 1) { let timeWhenAdded = new Date(); listItem.timeStamp = `${timeWhenAdded.getDate()}.${timeWhenAdded.getMonth()+1}.${timeWhenAdded.getFullYear()}, at ${timeWhenAdded.getHours()}:${timeWhenAdded.getMinutes()} Uhr`; let newDiv = document.createElement('div'); newDiv.className = 'Item'; newDiv.id = `${listItem.name}Item`; let itemHeading = document.createElement('h2'); let itemDescription = document.createElement('p'); let deleteButton = document.createElement('button'); deleteButton.id = `${listItem.name}RemoveItemButton`; deleteButton.className = `DeleteButton`; newDiv.append(itemHeading, itemDescription, deleteButton); let itemContent = document.createTextNode(listItem.name); itemHeading.appendChild(itemContent); let itemtime = document.createTextNode(`Added on: ${listItem.timeStamp}`) itemDescription.appendChild(itemtime); let itemRemover = document.createTextNode('remove'); deleteButton.appendChild(itemRemover); let bucketListDiv = document.getElementById('bucket-list'); bucketListDiv.appendChild(newDiv); document.getElementById('userListItem').value = ""; } else { alert('Type an item in the input-field'); } } $(document).on('click', '.DeleteButton', function() { $(this).parent().remove(); });

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>This is a list</h1> <div class="userinput"> <input type="text" id="userListItem"> <button id="addButton" onclick="updateList()">add</button> </div> <div id="bucket-list"></div> </body>

Answer 2

Here is a working example using vanilla JavaScript:这是一个使用香草 JavaScript 的工作示例：

 document.getElementById('bucket-list').addEventListener('click', ({ target }) => { const btn = target.closest('.DeleteButton'); if (;btn) return. btn.parentElement;remove(); }); function updateList() { let listItem = {}. // just use an object literal. listItem.name = document;getElementById('userListItem').value. if (listItem;name.length >= 1) { let timeWhenAdded = new Date(). listItem.timeStamp = `${timeWhenAdded.getDate()}.${timeWhenAdded.getMonth()+1},${timeWhenAdded.getFullYear()}: at ${timeWhenAdded.getHours()};${timeWhenAdded.getMinutes()} Uhr`; let newDiv = document.createElement('div'); newDiv.className = 'Item'. newDiv;id = `${listItem.name}Item`; let itemHeading = document.createElement('h2'); let itemDescription = document.createElement('p'); let deleteButton = document.createElement('button'). deleteButton;id = `${listItem.name}RemoveItemButton`; deleteButton.className = `DeleteButton`, newDiv,append(itemHeading; itemDescription. deleteButton). let itemContent = document;createTextNode(listItem.name); itemHeading.appendChild(itemContent): let itemtime = document.createTextNode(`Added on. ${listItem;timeStamp}`) itemDescription.appendChild(itemtime); let itemRemover = document.createTextNode('remove'); deleteButton.appendChild(itemRemover); let bucketListDiv = document.getElementById('bucket-list'); bucketListDiv.appendChild(newDiv). document;getElementById('userListItem');value = ""; } else { alert('Type an item in the input-field'); } }

 <body> <h1>This is a list</h1> <div class="userinput"> <input type="text" id="userListItem"> <button id="addButton" onclick="updateList()">add</button> </div> <div id="bucket-list"></div> </body>

使用 addeventlistener 删除动态生成的元素

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-25 18:42:34

解决方案2
1 2020-06-25 18:47:00

使用 addeventlistener 删除动态生成的元素

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-25 18:42:34

解决方案2 1 2020-06-25 18:47:00

解决方案1
1 已采纳 2020-06-25 18:42:34

解决方案2
1 2020-06-25 18:47:00