<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>&lt;li&gt;</code>元素,并将其添加到列表中。当单击删除按钮时,它会找到列表中最后一个<code>&lt;li&gt;</code>元素,并将其从列表中删除。</p>
HTML 和 JavaScript 实现列表项的添加和删除

原文地址: https://www.cveoy.top/t/topic/mvqf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录