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=".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='ment...'></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>

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./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='ment...'></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>

• javascript
• jquery
• html

• Closet searches an element's ancestors (think parent and grandparents - it doesn't look at cousins). Your best approach is probably to go up some amount and then look downward (with .find() probably). – John Hascall Commented Jul 12, 2018 at 8:52

4 Answers 4

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 mon 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./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='ment...'>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>

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./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='ment...'></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>

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./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='ment...'></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>

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

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

see fiddle