javascript - 隐藏 div 而不指定 id 或类

Question

我一直在寻找这样的问题，但我找不到。

我的结构如下所示：

<div id="productholder@(item.ProductId)" class="productholder">  
  <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
  <div class="productinfo">
    <h2>@Html.DisplayFor(modelItem => item.Name)</h2>
    <p>@Html.DisplayFor(modelItem=> item.Description)</p>
    <br />   
  </div>
  <div class="productprice">     
    <h2>@Html.DisplayFor(modelItem => item.price):-</h2>          
    <input type="button" value="Ta bort" class="b" data-ProductImageId='@item.ProductImageId'>                          
  </div>                                   
</div>

我想要做的是，当有人单击具有class="b"整个 div 标签的按钮时应该隐藏.hide()问题是我有 10 个这些 div 标签看起来相同，所以我不能指定一个 div 标签，因为它很重要只是我单击的按钮内的 div 标签被隐藏了。

我想我需要使用 parent 或类似的东西？

我尝试了以下 jquery 脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $(".b").click(function () {
            $("div:eq(0)").hide();
        });
    });
</script>

但我发现它不会起作用，因为它会隐藏整个 div 包装器。

任何一种解决方案都值得赞赏！

Answer 1

我认为您正在尝试隐藏整个容器..尝试使用closest

$(this).closest('.productholder').hide()

或者如果您只是想隐藏父 div，那么只需使用.parent()

$(this).parent().hide()

完整代码：

$(document).ready(function () {
    $(".b").click(function () {
        $(this).closest('.productholder').hide();
        // or $(this).parent().hide()
    });
});

Answer 2

    $(".b").click(function () {
        $(this).parent().hide();
    });

或者

    $(".b").click(function () {
        $(this).parent().parent().hide();
    });

Answer 3

你很接近，只需隐藏按钮的父级：

    $(".b").click(function () {
        $(this).parent('div').hide();
    });

或者，如果您想确保 div 被隐藏，即使您稍微更改层次结构：

    $(".b").click(function () {
        $(this).parents('div.productprice').hide();
    });

Answer 4

基本 DOM：每个 dom 节点都有一个父元素：

$('.b').click(function() {
   $(this).parent('div.productprice').hide();
});