What is the best way to extract the initial td value from a tr using JavaScript?

Question

What is the best way to extract the initial td value from a tr using JavaScript?

<tr>
  <td>Sample Data</td>
  <td>2020</td>
  <td>75</td>
  <td>05-20-2018</td>
  <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
 </tr>

In my table, there is a row with the data presented above. I would like to extract the first value in the row, which is "Sample Data", when the <i> element is clicked.

The rows are contained within a div with the ID of #list.

del(target,title) {
  if (target.className === 'fa fa-trash') {
    // To access and compare this title in LocalStorage for deletion purposes
  }
}

document.getElementById('list').addEventListener('click', function (e) {
  const tr = e.target.parentElement.parentElement.parentElement;
  console.log(tr);

  del(e.target, title);
});

The output displayed on the console will be:

<tr>
  <td>Sample Data</td>
  <td>2020</td>
  <td>75</td>
  <td>05-20-2018</td>
  <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr>

How can I locate the first <td> from this point without utilizing jQuery?

javascript tr

Answer 1

Answer №1

To make the click event more specific, consider targeting a particular element within the table instead of triggering on any click on the entire table.

You were on the right track with selecting the tr element. Once you have the tr, you can pass it into the del function and utilize getElementsByTagName on the tr to retrieve the first td from the tr.

After that, you can use removeChild to remove the first td that was queried from the parent node of the tr.

Here is an example:

function del(e){
    let firstTD = e.getElementsByTagName("td")[0];
    console.log(firstTD);
    e.removeChild(firstTD);
}

document.querySelectorAll('#list .fa').forEach(function(trash) {
  trash.addEventListener('click', function(e) {
    const tr = e.target.parentElement.parentElement.parentElement;
    del(tr);
  });

});

<div id="list">
  <table>
    <tbody>
      <tr>
        <td>Test Data</td>
        <td>2016</td>
        <td>59</td>
        <td>10-12-2014</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
      <tr>
        <td>Test Data 2</td>
        <td>2015</td>
        <td>33</td>
        <td>11-23-2012</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

To make the click event more specific, consider targeting a particular element within the table instead of triggering on any click on the entire table.

You were on the right track with selecting the tr element. Once you have the tr, you can pass it into the del function and utilize getElementsByTagName on the tr to retrieve the first td from the tr.

After that, you can use removeChild to remove the first td that was queried from the parent node of the tr.

Here is an example:

function del(e){
    let firstTD = e.getElementsByTagName("td")[0];
    console.log(firstTD);
    e.removeChild(firstTD);
}

document.querySelectorAll('#list .fa').forEach(function(trash) {
  trash.addEventListener('click', function(e) {
    const tr = e.target.parentElement.parentElement.parentElement;
    del(tr);
  });

});

<div id="list">
  <table>
    <tbody>
      <tr>
        <td>Test Data</td>
        <td>2016</td>
        <td>59</td>
        <td>10-12-2014</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
      <tr>
        <td>Test Data 2</td>
        <td>2015</td>
        <td>33</td>
        <td>11-23-2012</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
    </tbody>
  </table>
</div>

What is the best way to extract the initial td value from a tr using JavaScript?

Answer №1

Similar questions

What is the best way to efficiently query a substantial dataset using Node.js in an asynchronous fashion?

What steps should I take to ensure that pull is functioning correctly with mongoose and mongodb?

What are the steps for integrating a CMS with my unique website design?

JQuery Autocomplete Error: Unable to access property 'value' of undefined

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

Having trouble retrieving the DD-MM-YYYY date format in Vue.js from MySQL database

Are there any specific steps I should take to ensure that my server can support jQuery.getJSON when using a bookmarklet?

Eliminating bottom section in HTML/CSS

Getting the iframe onload event in an ASP.NET application

Google Analytics Experiments implemented on the server-side

Three.js: "Identifying Tool" How to recognize the overlap between a 2D square and 3D elements

I'm having trouble customizing the appearance of a Tab Panel using the TabsAPI. The panel keeps expanding in strange ways. How can I

Adjusting the alignment of the horizontal bars in react-chartjs-2

Transform unicode characters into HTML code

Dragging elements using the jQuery UI Draggable feature onto a designated droppable area

JavaScript / html Error: function body missing closing curly brace

What are some ways to direct users from one page to another without relying on server-side programming?

What is the best way to set a checkbox's default state in a react table using a value from Firestore?

Is there a way to render the hidden faces of the cube to the framebuffer? (The sides that are not visible from my current perspective)

Prevent duplicate rectangles by cleaning up dirty rectangles