HTML 和 JavaScript 实现列表项的添加和删除
<ul id='myList'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id='addBtn'>Add Item</button>
<button id='removeBtn'>Remove Item</button>
<script>
var myList = document.getElementById('myList');
var addBtn = document.getElementById('addBtn');
var removeBtn = document.getElementById('removeBtn');
// 添加项
addBtn.addEventListener('click', function() {
var newItem = document.createElement('li');
newItem.textContent = 'New Item';
myList.appendChild(newItem);
});
// 删除项
removeBtn.addEventListener('click', function() {
var lastItem = myList.lastChild;
if (lastItem) {
myList.removeChild(lastItem);
}
});
</script>
<p>上述代码使用<code>addEventListener</code>方法为添加和删除按钮添加了单击事件监听器。当单击添加按钮时,它会创建一个新的<code><li></code>元素,并将其添加到列表中。当单击删除按钮时,它会找到列表中最后一个<code><li></code>元素,并将其从列表中删除。</p>
原文地址: https://www.cveoy.top/t/topic/mvqf 著作权归作者所有。请勿转载和采集!