我可以在Javascript中选择HTML元素最近的祖先吗（在DOM中遍历）？

在下面的代码片段中，我想在单击按钮时捕获最外层的elementli.menu项

通常，我可以使用document.querySelector.menu-item，但在本例中，这些列表项是动态添加的，因此menu-item类中存在多个li元素

如何获取最接近的li祖先以提取其子代的值

<li class="menu-item">
    <div class="item">
        <p>Chicken Veg Roll</p>
        <img src="../../assets/img/menu/tasty-rolls.jpg">
    </div>
    <p class="price">1350.00</p>
    <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>

---

我对你的案子做了一些假设，但你可以用

来自MDN

Element.closest方法返回 当前元素或与 参数中给出的选择器。如果没有这样一个祖先，它 返回null

看看这个例子

const buttons=document.queryselectoral'.order btn'； buttons.forEachbutton=>button.addEventListener'click'，handleClick； 功能手柄{ e、 防止违约； const li=这个。最近的'li'； li.style.background='red'； } 文件 鸡肉蔬菜卷

1350.00

增加订单 鸡肉蔬菜卷

1350.00

增加订单 鸡肉蔬菜卷

1350.00

增加订单 鸡肉蔬菜卷

1350.00

增加订单 鸡肉蔬菜卷

1350.00

增加订单 函数clickHandlerevent{ alertevent.target.parentNode.tagName； } 测验 点击我

---

可能的可怕的复制使得遍历DOM变得微不足道。这些方法在这里可以帮助您。不要仅仅为了这个目的而使用jquery，但要评估它的功能是否值得为您的网站增加库开销。请注意，如果没有polyfill，closest将无法在IE中工作。Jon P对IE的看法是正确的，polyfill就在这里

<li class="menu-item">
    <div class="item">
        <p>Chicken Veg Roll</p>
        <img src="../../assets/img/menu/tasty-rolls.jpg">
    </div>
    <p class="price">1350.00</p>
    <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>   



 document.querySelector(".order-btn").addEventListener("click",function(e){
    console.log(e.target.parentElement);
 });