jQuery get clicked elements parent and then its child

Question

I have a form that's hidden, when i link is clicked i want that form to be shown.

{% for comment in comments %}
                        <li class="depth-1 comment">
                            <div class="comment__avatar">
                                {#<img width="50" height="50" class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#}
                            </div>
                            <div class="comment__content">
                                <div class="comment__info">
                                    <cite>{{ comment.user.username }}</cite>
                                    <div class="comment__meta">
                                        <time class="comment__time">{{ comment.created_at }}</time>
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                                <div class="comment__text" id="data">
                                    <p>{{ comment.text }}</p>
                                </div>
                                <div class="respond reply-comment" style="display: none">
                                    <form name="contactForm" id="contactForm reply-form" method="post" action="">
                                        <div class="message form-field reply-field">
                                            {{ comment_form.text }}
                                        </div>
                                        <button type="submit" class="submit btn--primary" style="float: right;">
                                            Submit
                                        </button>
                                    </form> <!-- end form -->
                                </div> <!-- end respond -->
                            </div>
                        </li> <!-- end comment level 1 -->
                    {% endfor %}

When reply is clicked, i need reply-comment 's style to be "". How can i achive that?

Answer 1

To achieve this you need to traverse the DOM to find the .reply-comment related to the clicked .reply element. In this case you would do that by using closest() , to get the nearest common parent, then find() .

You should also avoid using inline style attributes. Place your styling in external stylesheets so that it can be overridden much more simply.

In addition you should not put id attributes in HTML generated by a loop. This is because it creates multiple elements with the same id which is invalid. Either remove the id , or use class attributes to group elements by common behaviour.

Lastly clickable a elements should always have an href attribute. This is because in some older browsers the click event would not be raised unless it's present. You can stop the URL from being updated when this happens by using preventDefault() in the event handler.

With all that said, try the below example. Note that I removed some of the HTML from this to make it a little shorter.

 $('.reply').on('click', function(e) { e.preventDefault(); $(this).closest('.comment__content').find('.reply-comment').show(); });

 .comment__avatar.avatar { width: 50px; height: 50px; }.reply-comment { display: none; }.submit.btn-primary { float: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="depth-1 comment"> <div class="comment__avatar"> {#<img class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#} </div> <div class="comment__content"> <div class="comment__info"> <div class="comment__meta"> <a href="#" class="reply">Reply</a> </div> </div> <div class="respond reply-comment"> <form name="contactForm" method="post" action=""> <div class="message form-field reply-field">{{ comment_form.text }}</div> <button type="submit" class="submit btn--primary">Submit</button> </form> </div> </div> </li> <li class="depth-1 comment"> <div class="comment__avatar"> {#<img class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#} </div> <div class="comment__content"> <div class="comment__info"> <div class="comment__meta"> <a href="#" class="reply">Reply</a> </div> </div> <div class="respond reply-comment"> <form name="contactForm" method="post" action=""> <div class="message form-field reply-field">{{ comment_form.text }}</div> <button type="submit" class="submit btn--primary">Submit</button> </form> </div> </div> </li> </ul>

Answer 2

You can use.closet for find parent by class name, and then use.find for find child. Finally use removeAttr("style") for remove style

 $('.reply').on('click', function(){
    $(this).closest('div[class="comment__content"]').find('.reply-comment').removeAttr("style");
 })