Getting the parent of button without ID in Javascript

Question

I am struggling to get the parent of button when it is clicked. This is my HTML structure:

<p><button class="remove">x</button> Hamlet<input value="5"></p>

I don't want to use the ID in button because I have many of the same buttons. Any help is appreciated. Thanks!!!

The problem is solved in JS, please show the JS code related to the event handler of the button. — Teemu, Jan 31 '20 at 08:54
See [here](https://stackoverflow.com/questions/59054548/js-get-the-clicked-element-with-event-target) to get the button, then [here](https://stackoverflow.com/questions/6856871/getting-the-parent-div-of-element) to get its parent. — T.J. Crowder, Jan 31 '20 at 08:56

mplungjan · Answer 1 · 2020-01-31T09:19:47.197

Like this? Note I delegate from a container

document.getElementById("container").addEventListener("click", function(e) {
  let tgt = e.target;
  if (tgt.classList.contains("remove")) tgt.closest("p").remove();
})

<div id="container">
  <p><button class="remove">x</button> Hamlet<input value="1"></p>
  <p><button class="remove">x</button> Ophelia<input value="2"></p>
  <p><button class="remove">x</button> Polonius<input value="3"></p>
</div>

For browser that doe not like closest you can use tgt.parentElement.remove()

score 0 · Accepted Answer · answered Jan 31 '20 at 09:03

Maybe consider adding a universal click event to all buttons.

const onClickButton = function () {
  // The parent element
  const parent = this.parentElement;
  parent.style.backgroundColor = 'red';
};

[...document.getElementsByTagName('button')].forEach(button => button.addEventListener('click', onClickButton));

<p>
  <button class="remove">x</button>
  Hamlet1
  <input value="5">
</p>

<p>
  <button class="remove">x</button>
  Hamlet2
  <input value="5">
</p>

<p>
  <button class="remove">x</button>
  Hamlet3
  <input value="5">
</p>

Getting the parent of button without ID in Javascript

2 Answers2