From JQuery to Javascript

Question

What's the javascript equivalent of the following jquery line?

Javascript Context:

var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".nr").text(); // Find the text

HTML Context (Table):

 <tr>
 <td class="nr"><span>50</span>
 </td>
 <td>Some Street 1</td>
 <td>
 <button class="use-address"> Test </button>
 
 </td>
 </tr>
 <tr>
 <td class="nr">49</td>
 <td>Some Street 2</td>
 <td>
 <button class="use-address" > Test </button>
 </td>
 

• ggorlen: Does this answer your question? Vanilla JavaScript .closest without jQuery
• Lawrence: I tried changing to this: document.querySelector('.nr').closest('tr').text();. It does not work, and I don't know why.
• fdomn-m: document.querySelector isn't the equivalent of $row.find. Please include some html and context - eg what's this?
• fdomn-m: The link above and youmightnotneedjquery.com gives something like, probably: var text = this.closest("tr").querySelector(".nr").textContent Edit: yep, that seems to work ok: jsfiddle.net/2pcavnsj - but it is really a duplicate
• Lawrence: @freedomn-m I have added in the HTML context. It's searching for the column text in the table. Thank you, your solution works!

Answer 1

I am assuming your original code looked similar to the following:

$('table').on('click', '.use-address', function() {
 var $row = $(this).closest("tr"); // Find the row
 var text = $row.find(".nr").text().trim(); // Find the text
 console.log(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <tbody>
 <tr>
 <td class="nr"><span>50</span>
 </td>
 <td>Some Street 1</td>
 <td>
 <button class="use-address"> Test </button>
 </td>
 </tr>
 <tr>
 <td class="nr">49</td>
 <td>Some Street 2</td>
 <td>
 <button class="use-address"> Test </button>
 </td>
 </tr>
 </tbody>
</table>

You should avoid declaring variables with leading $ (dollar signs), unless the value they hold is an actual jQuery element.

The equivalent would be the following:

const handleClick = ({ target }) => {
 if (target.classList.contains('use-address')) {
 const row = target.closest('tr');
 const text = row.querySelector('.nr').textContent.trim();
 console.log(text);
 }
};
document.querySelector('table').addEventListener('click', handleClick);

<table>
 <tbody>
 <tr>
 <td class="nr"><span>50</span>
 </td>
 <td>Some Street 1</td>
 <td>
 <button class="use-address"> Test </button>
 </td>
 </tr>
 <tr>
 <td class="nr">49</td>
 <td>Some Street 2</td>
 <td>
 <button class="use-address"> Test </button>
 </td>
 </tr>
 </tbody>
</table>

Checkout "You might not need jQuery" to see some examples of equivalent plain JS code.