Question

I have been searching on a question like this but I cant find it.

I have structure that looks like this:

<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>

What I want to do is that when somebody click on the button that has class="b" the whole div tag should get hidden with .hide() the problem is that I have 10 of these div tags that look the same so I cant specify a div tag, because its important that just the div tag inside the button that i clicked gets hidden.

I guess I need to use parent or something like that?

I have tried the following jquery scripts:

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

But I figure out it wont work beacuse it will hide the whole div wrapper.

Any kind of solution is appreciated!

Answer 1

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

or

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