CODEWITHSUNDEEP
javascriptjquery
Ram72119
Ram72119

Reputation: 107

How to hide an element when I click the X mark in a child span

How can I hide a div tag when I click the X mark in the span tag?

Code:

<c:if test="${not empty model}">
    <div class="row">
        <c:forEach var="listValue" items="${model}">
            <div class="col-md-4" style="background-color:green;"> --> I want to hide this div
                <table class="table">
                    <tr>
                        <td colspan="2">
                            <span class="pull-right">X</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Product ID</td>
                        <td>${listValue.id}</td>
                    </tr>
                    <tr>
                        <td>Product Name</td>
                        <td>${listValue.name}</td>
                    </tr>
                    <tr>
                        <td>Product Description</td>
                        <td>${listValue.description}</td>
                    </tr>
                </table>
            </div>
        </c:forEach>
    </div>
</c:if>

Upvotes: 0

Views: 68

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

It is better to use .closest() to make it work and also delegate the function:

$("table").on("click", ".pull-right", function() {
    $(this).closest(".col-md-4").hide();
});

This way, even if the code is generated by AJAX, the events get delegated from the static <table> and then the <div> is hidden.

Upvotes: 2

Andreas
Andreas

Reputation: 21881

Use .closest() to get the surrounding div

$(".pull-right").on("click", function() {
    $(this).closest(".col-md-4").hide();
});

Upvotes: 2

Related Questions