jquery show all divs with class more inside clicked element

Question

i like to hide all "c1" inside the clicked class "brick":

<div class="brick">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
</div>

<div class="brick">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
</div>


 $(document).on("click touchend", ".brick", function(event) {
    $(".c1").hide();
});

But if i click on brick all "c1" will be hidden. But i like to hide for example only the "c1" in the first brick because i clicked on the first.

Answer 1

You need to hide the element based on the current event scope. Use .find():

$(document).on("click touchend", ".brick", function(event) {
    $(this).find(".c1").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="brick">
    <div class="c1">brick 1 - c1</div>
    <div class="c2">brick 1 - c2</div>
    <div class="c3">brick 1 - c3</div>
    <div class="c1">brick 1 - c1</div>
</div>

<hr>

<div class="brick">
    <div class="c1">brick 2 - c1</div>
    <div class="c2">brick 2 - c2</div>
    <div class="c3">brick 2 - c3</div>
    <div class="c1">brick 2 - c1</div>
</div>