Simplest way to get parent div for actionEvent handling?

Question

Im making a button 2d matrix in the format:

<table id="board">
        <tr class="row 0">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 1">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 2">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
</table>

I wanted to make one function when a user clicks on the buttons. My idea was to get the row and the column from the button that is pressed but Im not sure how to do that. In my js script I wanted to do something like:

document.querySelector('button').onclick = move("insert button row", "insert button column");

I would like any ideas on how to find the parent div or something capable of accomplishing this task.

@Matthew sir may i send him syntax..May this will help him a lot as he is learning himself — Mubeen Khan, Mar 14 '19 at 02:58
I suggest learning about it. I'll provide a jQuery way of doing it as well as using non-jQuery. — Matthew, Mar 14 '19 at 02:58
Possible duplicate — [Finding closest element without jQuery](https://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery#35294561) — Andy Hoffman, Mar 14 '19 at 03:03

score 0 · Answer 1 · answered Mar 14 '19 at 03:00

You can use parentNode to get the parent element of a particular element.

See example below.

document.querySelectorAll('button').forEach(function (e) {
  e.onclick = function () {
    console.log(`This is ${e.nodeName}`);
    console.log(`My dad is ${e.parentNode.nodeName}`);
    console.log(`My grandpa is ${e.parentNode.parentNode.nodeName}`);
  }
});

<table id="board">
        <tr class="row 0">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 1">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 2">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
  </tr>
</table>

score 0 · Accepted Answer · answered Mar 14 '19 at 03:01

You need to loop over all the buttons. And you have to assign a function to onclick, not call the function. Inside that function, you can use this to refer to the button that was clicked, parentElement to get the containing element, and rowIndex and cellIndex to get their positions in the table.

document.querySelectorAll('button').forEach(function(b) {
    b.addEventListener('click', function() {
        var col = this.parentElement.cellIndex;
        var row = this.parentElement.parentElement.rowIndex;
        move(row, col);
    });
});

score 0 · Answer 3 · edited Mar 22 '19 at 13:58

jQuery way (Needs JS lib inserted on page):

$('button').on('click', () => {
    this.parentNode.parentNode; //Retrieves TR tag of the individual button
    move("insert button row", "insert button column");
});

Non-jQuery Way:

document.querySelectorAll('button').forEach((e) => {
    console.dir(e); //Reads out of all properties and methods of element in console
  //Inserts click event listener logic if you please
  e.parentNode.parentNode; //Retrieves the TR tag of the button
    move("insert button row", "insert button column");
});

jgutierrez · Answer 4 · 2019-03-14T03:12:29.153

0

You can try to add the event listener to the tr element and then access the target and currentTarget's parent

for (var trEL of document.querySelectorAll('tr')) {
  trEl.addEventListener('click', event => {
  if (event.target.tagName === 'button') {
    move(event.target.parentNode, event.currentTarget)
  }
 });
}

edited Mar 14 '19 at 03:12

answered Mar 14 '19 at 03:04

jgutierrez

26
5

Ted Whitehead · Answer 5 · 2019-03-20T17:46:18.047

Below is one approach you could take.

The benefit of using closest() is you don’t have to worry about changing the markup in the future. I would also recommend using addEventListener() instead of onclick since you may inadvertently override another click event with onclick since it is in the global scope (see Why is using onClick() in HTML a bad practice?).

NOTE: closest() requires a polyfill in IE 11- (https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill)

const buttons = document.querySelectorAll("button");

buttons.forEach(el => {
  el.addEventListener("click", evt => {
    let button = evt.target;
    console.log({
      row: button.closest("tr").classList[1],
      columns: button.closest("td").classList[1]
    });
  });
});

button {
  display: block;
  height: 20px;
  width: 20px;
}

button:hover,
button:focus,
button:active {
  background-color: blue;
  cursor: pointer;
}

<table id="board">
  <tr class="row 0">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
  <tr class="row 1">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
  <tr class="row 2">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
</table>

Simplest way to get parent div for actionEvent handling?

5 Answers5