In JavaScript and HTML, how can I get the access to the that the current button locates?

Question

In HTML, I have

 <div>
      <button onclick="action()">button</button>
 </div>

Without giving an ID or class to the div element, what can I do in JavaScript to get an access to it and use it?

Answer 1

Pass this into action:

<button onclick="action(this)">button</button>

and then in action

function action(btn) {
    var div = btn.parentNode;
    // ...
}

or if you want a bit more flexibility, use the (relatively-new) closest method:

function action(btn) {
    var div = btn.closest("div");
    // ...
}

---

Side note: Rather than onxyz-attribute-style event handlers, consider using modern event handling (addEventListener, attachEvent on obsolete browsers). If you have to support obsolete browsers, my answer here provides a function you can use to deal with the lack of addEventListener.

Answer 2

using this in the onclick=action() and then the parent is .parentNode then your method would look like :

<div>
  <button onclick="action(this);">button</button>
</div>

function action(el) {
  console.log(el.parentNode);
}

but I rather prefer .addEventListenerand for your next question then :

var $el = document.getElementById("a");
$el.addEventListener("click", function(e) {
  // Create a <button> element
  var btn = document.createElement("BUTTON");
  // Create a text node 
  var t = document.createTextNode("CLICK ME");
  // Append the text to <button>
  btn.appendChild(t);        
  // Append <button> to the parentNode          
  this.parentNode.appendChild(btn);
});

<div>
  <button id="a">Button</button>
</div>

Also in case you wonder for a shorter version and probably introducing to the jQuery :

;$(function(){
  $("#a").on("click", function(e) {  
    $(this).parent().append('<button>Click Me</button>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="a">Button</button>
</div>

Another but not straight way to get the parent instead of .parentNode is .closest() method:

element.closest("div"); // also supported in jQuery

Returns the first ancestor of element, that is a <div> element:

Answer 3

Grab the event then get the currentTarget then find the parentNode. Very simple way to do it. This will work no matter which element is clicked. Please see code snippet demonstration.

function getParentNode(event) {
  console.log(event.currentTarget.parentNode);
}

<div id="div1"><button onclick="getParentNode(event)">Click</button></div>
<div id="div2"><button onclick="getParentNode(event)">Click</button></div>

Answer 4

If it is possible, pass this (button) to action. Then you can access parent by element.parentNode. Example: https://jsbin.com/fidufa/edit