CODEWITHSUNDEEP
jqueryhtmlcss
Claudio Delgado
Claudio Delgado

Reputation: 2349

How to target the highest parent of the clicked element

I want to close the highest parent of the element with the function using this code, but it doesn't work. How should I properly target the parent in this situation?

<script>
function autoclose() {
$(this).parents('.Table').hide();
}
</script>
<div class="Table">
    <div class="Heading">
        <div class="Cell">
            <p style="font-family:SimHei;font-size: 25px;"><?php echo $word[$i]; ?></p>
        </div>
        <div class="Cell">
            <p onclick="autoclose();">Correct</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $pinyin[$i]; ?></p>
        </div>
        <div class="Cell">
            <p>Incorrect</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $meaning[$i]; ?></p>
        </div>
         <div class="Cell">
            <p>Result</p>
        </div>
    </div>
</div>

Upvotes: 0

Views: 58

Answers (2)

Daniel Omilegan
Daniel Omilegan

Reputation: 117

Try to pass the calling object to as a parameter to the function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function autoclose(e) {
$(e).parents('.Table').hide();
}
</script>
<div class="Table">
    <div class="Heading">
        <div class="Cell">
            <p style="font-family:SimHei;font-size: 25px;"><?php echo $word[$i]; ?></p>
        </div>
        <div class="Cell">
            <p onclick="autoclose(this);">Correct</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $pinyin[$i]; ?></p>
        </div>
        <div class="Cell">
            <p>Incorrect</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $meaning[$i]; ?></p>
        </div>
         <div class="Cell">
            <p>Result</p>
        </div>
    </div>
</div>

Upvotes: 1

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You need to pass the target element as parameter to the function.

function autoclose(e) {
  $(e).parents('.Table').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Table">
    <div class="Heading">
        <div class="Cell">
            <p style="font-family:SimHei;font-size: 25px;"><?php echo $word[$i]; ?></p>
        </div>
        <div class="Cell">
            <p onclick="autoclose(this);">Correct</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $pinyin[$i]; ?></p>
        </div>
        <div class="Cell">
            <p>Incorrect</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p><?php echo $meaning[$i]; ?></p>
        </div>
         <div class="Cell">
            <p>Result</p>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions