针对嵌套重复类名DOM，如何简化原生JavaScript父元素操作代码？

你的目标是移除包含id含undefinedundefined元素的最外层.combobox-container，当前多次链式调用closest的写法确实冗余，这里提供几种更简洁的原生JS实现：

方案1：依赖固定DOM结构的极简写法 #

如果你的HTML结构固定（目标元素到要移除的容器层级不变），可以直接通过多层parentNode定位：

const mvalues = document.querySelectorAll("[id*='undefinedundefined']");
mvalues.forEach(item => {
  // 向上遍历四层父元素，直接定位最外层容器
  item.parentNode.parentNode.parentNode.parentNode.remove();
});

方案2：健壮的动态查找写法 #

如果DOM结构可能有嵌套层数变化，用循环向上查找最外层的.combobox-container：

const mvalues = document.querySelectorAll("[id*='undefinedundefined']");
mvalues.forEach(item => {
  let targetContainer = item.closest(".combobox-container");
  // 一直向上找，直到容器的父元素不是.input-group
  while (targetContainer.parentNode.classList.contains("input-group")) {
    targetContainer = targetContainer.parentNode.closest(".combobox-container");
  }
  targetContainer.remove();
});

方案3：现代浏览器极简写法（支持:has选择器） #

如果你的项目兼容Chrome 101+、Firefox 121+等现代浏览器，可直接用CSS:has选择器一次性选中目标容器：

// 选中最外层的、包含目标元素的combobox-container
document.querySelectorAll(".combobox-container:not(.input-group > .combobox-container):has([id*='undefinedundefined'])")
  .forEach(el => el.remove());

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