jQuery - get closest element in different div levels

Question

I am clicking the list button with class="btn btn-primary modal-save" .

When I click that button, I want it to grab the textarea element of div class="modal-body" .

For some reason my closest() method isn't functioning the way I want it to be, and returns undefined

Why, and how to fix?

 $('.modal-save').on('click', function() { var text = $(this).closest(".modal-footer")[0]; console.log(text) // this code works var text = $(this).closest(".modal-body textarea")[0]; console.log(text) // this gives me undefined. Why?? }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div> 

Answer 1

closest returns the nearest ancestor matching the selector. If it's not a direct ancestor, it won't work. Try selecting the .modal-content first (which is the nearest common ancestor to both), and then trying to find the textarea :

 $('.modal-save').on('click', function() { var text = $(this).closest(".modal-content").find("textarea"); console.log(text.val()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'>foo</textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div> 

Answer 2

You can also find the textarea this way.

$(this).closest(".modal-footer").prev(".modal-body").find("textarea")[0]
//          ^^go for parent       ^^go for sibling    ^^Its child

Example:

 $('.modal-save').on('click', function() { var text = $(this).closest(".modal-footer")[0]; console.log(text) // this code works var text = $(this).closest(".modal-footer").prev(".modal-body").find("textarea")[0]; console.log(text) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div> 

Answer 3

Here is my contribution.

I've split everything up into steps so you would understand clearer.

Using .parent() you access the DOM element that is top-most relative to your element.

Using .find() you get the descendants of each element in the current set.

---

 $('.modal-save').on('click', function() { let footer = $(this).parent(); let content = footer.parent(); let textarea = content.find('.modal-body textarea'); let text = textarea.val(); console.log(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div> 

Answer 4

I would have targeted the text-area for faster execution.

alert($('.modal-body textarea').val());

see fiddle