如何用innerHTML实现HTML列表项删除？附添加方法对比

你尝试的innerHTML -=写法本身就存在问题——innerHTML是字符串类型，JS里没有针对字符串的-=操作符，而且你操作的是最后一个<li>的内部HTML，不是父级<ul>的内容，自然不会生效。

如果一定要用innerHTML实现删除最后一个<li>，可以试试这两种方法：

方法1：正则表达式替换 #

通过正则匹配并移除最后一个<li>的完整HTML结构：

const myList = document.querySelector("ul");
// 匹配最后一个li标签（含属性）及内部所有内容，替换为空
myList.innerHTML = myList.innerHTML.replace(/<li[^>]*>[\s\S]*?<\/li>\s*$/, '');

注：这个正则能适配带属性的<li>，也能处理内部嵌套标签，但如果列表里存在非常规的嵌套结构（比如<li>里套<li>），可能会出现匹配错误。

方法2：利用outerHTML精准替换 #

先获取最后一个<li>的完整HTML代码，再从父级<ul>的innerHTML中移除这段代码：

const myList = document.querySelector("ul");
const lastLi = myList.querySelector('li:last-child');
if (lastLi) {
  // 用空字符串替换最后一个li的完整HTML
  myList.innerHTML = myList.innerHTML.replace(lastLi.outerHTML, '');
}

额外提醒：更可靠的替代方案 #

其实用原生DOM方法删除元素比innerHTML更稳妥，不会因为字符串重新解析丢失元素上绑定的事件监听，写法也更简洁：

const lastLi = document.querySelector("ul li:last-child");
if (lastLi) {
  lastLi.remove();
}

内容的提问来源于stack exchange，提问作者Ira