How can I get the text value of with nested button?

Question

I am trying to get the text value of the current list item.

I have tried using $(this).text() and $(this).parent().text() which both return undefined or null. I assume the solution is relatively simple but I cannot figure this one out.

Answer 1

I know this is similar to Zakaria Acharki's answer, but this is shorter.

$(function() {
  $('li').click(function() {
    console.log($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>Coffee <button>something</button></li>
  <li>Tea <button>something</button></li>
  <li>Milk <button>something</button></li>
</ul>

Note that using this, will get the text inside the button as well. To avoid that, use this instead:

$(function() {
  $('li').click(function() {
    console.log($(this).clone().children().remove().end().text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>Coffee <button>something</button></li>
  <li>Tea <button>something</button></li>
  <li>Milk <button>something</button></li>
</ul>

Found in this amazing answer: Using .text() to retrieve only text not nested in child tags

EDIT: Alternatively, you could just wrap the text in a and get the text from that instead:

$(function() {
  $('li').click(function() {
    console.log($(this).children('span').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li><span>Coffee</span><button>something</button></li>
  <li><span>Tea</span><button>something</button></li>
  <li><span>Milk</span><button>something</button></li>
</ul>

Answer 2

In the onclick attribute, call the function with this as an argument. Then in the function, you'll have to get the entire text, and remove the button text.

This method does not rely on the ID, and can be used for any button inside of an li tag.

Sample HTML

<li id="ED_H">
  john.live.com
  <button onclick="editUnit(this)" type="button">Edit</button>
</li>

JavaScript

var editUnit = function (button) {
 var buttonText = button.innerText;
 var fullText = button.parentElement.innerText;
 var wanted = fullText.replace(buttonText, '');
 console.log(wanted);
};

Answer 3

If you're using click event $(this).text() should work.

$(function(){
    $('body').on('click', 'li', function(){
        console.log( $(this).text() );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 4

You can use childNodes[0] on the li element you want the text from, which gets the first childNode (text node in your example), then get the value of that node with nodeValue and use trim() to remove any whitespace.

var elEd_h = document.getElementById("ED_H");
console.log(elEd_h.childNodes[0].nodeValue.trim());

<li id="ED_H">
  john.live.com
  <button>
  Edit
  </button>
</li>