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标签会被隐藏。

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

我尝试了以下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();
});

隐藏div而不指定id或类

4 个答案: