Javascript 选择父元素类

我的html代码如下：

<div id="cart-list">
        <div class="col-xs-12 product-grid-item">
            <span class="product-grid-id"   style="display: none;">3</span>
            <div class="product-info col-xs-12">
                    <div class="col-xs-8 product-metadata">
                        <div class="name">Name</div>
                        <div class="price">Price</div>  
                <div class="col-xs-6" id="delete">
                    <button type="submit" name="delete-btn" id="delete-btn">Delete</button>
                </div>

                    </div>
            </div>


    </div>
<div class="col-xs-12 product-grid-item">
...
</div>
<div class="col-xs-12 product-grid-item">
...
</div>
<div class="col-xs-12 product-grid-item">
...
</div>
    </div>

我想在单击delete按钮时，它应该选择类名为product grid id的span元素，并获取其中的文本，在本例中为3，然后向前传递

---

注意：购物车列表div中将有许多产品网格项目div。我需要获取单击“删除”按钮的div的id。此删除按钮将出现在每个产品网格项中

您的问题是具有

产品网格id

类的

span

元素不是当前按钮的子项，也不是它的直接父项，因此，您实际上需要做的是找到一个相关的父级，然后在该父级中找到

span.product grid

元素

要在dom树上查找父级，需要使用

parents（SELECTOR）

函数，然后可以使用

find（SELECTOR）

函数获取要查找的元素

这是一个示例：（注意，我注释掉了对

deleteFromCart

函数的调用）。

$（“.product grid item”）。在（'单击'，'删除btn'，函数（e）{
e、 预防默认值（）；
var id=$（this）.parents（'.product grid item'）.find（“.product grid”）.text（）；
//deleteFromCart（id）；
console.log（id）；
返回false；
});

3.
名称
价格
删除
您的问题是，具有
产品网格id
类的
span
元素不是当前按钮的子元素，也不是它的直接父元素，因此您实际需要做的是找到一个相关的父元素，然后在该父元素中找到
span.product grid
元素

要在dom树上查找父级，需要使用
parents（SELECTOR）
函数，然后可以使用
find（SELECTOR）
函数获取要查找的元素

这是一个示例：（注意，我注释掉了对
deleteFromCart
函数的调用）。
$（“.product grid item”）。在（'单击'，'删除btn'，函数（e）{
e、 预防默认值（）；
var id=$（this）.parents（'.product grid item'）.find（“.product grid”）.text（）；
//deleteFromCart（id）；
console.log（id）；
返回false；
});

3.
名称
价格
删除
您可以选择最近的：

<div class="product-info col-xs-12">


3.
名称
价格
删除
...
...
...
您可以选择最近的：

<div class="product-info col-xs-12">


3.
名称
价格
删除
...
...
...
感谢您的快速回答：）谢谢你的快速回答：）