Javascript - Retrieving values of a div when a button inside that div is clicked

Question

I'm writing the code to edit a database table.

I have the following HTML:

<div id="1">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>

<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>

<div id="2">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>

<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>

<div id="3">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>

<button onClick="a('save')">SAVE</button>
<button onClick="a('delete')">DELETE</button>
</div>

And so on.

Using the following function, I can get the clicked button:

function a(value) {
  console.log(value);
}

When a button (SAVE or DELETE) is clicked, I need to retrieve:

the id of the "parent" div;
the content of each of the three contenteditable divs inside the same "parent" div.

Is it possible using pure Javascript?

Any suggestion will be very appreciated.

Thanks in advance.

score 3 · Accepted Answer · answered Oct 24 '20 at 19:48

What I would do is implement click listeners in JS, that way I can query elements easily.

Here is the example:

// Query all div.div-editable elements
document.querySelectorAll('div.div-editable')
  .forEach((div) => {
    // The id of the parent
    const divId = div.id;

    // Each of content editable divs inside the parent div
    const editables = div.querySelectorAll('div[contenteditable]');

    // The buttons Save and Delete
    const saveBtn = div.querySelector('button.button-save');
    const deleteBtn = div.querySelector('button.button-delete');

    // Add click listeners to buttons
    saveBtn.addEventListener('click', function() {
      console.log('Saved: ' + divId);

      const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);

      console.log('Values of divs:', contentOfEditableDivs);
    });
    deleteBtn.addEventListener('click', function() {
      console.log('Deleted: ' + divId);

      const contentOfEditableDivs = Array.from(editables).map((div) => div.innerText);

      console.log('Values of divs:', contentOfEditableDivs);
    });
  });

<div id="1" class="div-editable">
<div contenteditable>aaa</div>
<div contenteditable>bbb</div>
<div contenteditable>ccc</div>

<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>

<div id="2" class="div-editable">
<div contenteditable>ddd</div>
<div contenteditable>eee</div>
<div contenteditable>fff</div>

<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>

<div id="3" class="div-editable">
<div contenteditable>ggg</div>
<div contenteditable>hhh</div>
<div contenteditable>iii</div>

<button class="button-save">SAVE</button>
<button class="button-delete">DELETE</button>
</div>

EDIT 1: Added code snippet

EDIT 2: Simplified explanation

score 3 · Answer 2 · answered Oct 24 '20 at 19:54

3

You can send this keyword in the argument of click's event handler and then access the parent div's id.

So your HTML would look something like:

// rest of the code here
<button onClick="a(this, 'save')">SAVE</button>
<button onClick="a(this, 'delete')">DELETE</button>
// rest of the code here

And your JS code would change to:

function a(elem, value) {
  console.log(elem.parentNode.id);
}

More details on the following link: how i get parent id by onclick Child in js

answered Oct 24 '20 at 19:54

usafder

791
5
17

Thanks, but how to retrieve the content of each of the three contenteditable divs inside the "parent" div? – AbsoluteBeginner Oct 24 '20 at 20:02
They could be three or four. – AbsoluteBeginner Oct 24 '20 at 20:13
1

You can then use `elem.parentNode.children` to access the children of the "parent" div. So if you need to get the value of 1st contenteditable div you can do something like `elem.parentNode.children.item(0).innerHTML`. – usafder Oct 24 '20 at 20:21
Or ```elem.parentNode.children[0].innerHTML``` (for the 1st contenteditable div). – AbsoluteBeginner Oct 24 '20 at 20:56

Javascript - Retrieving values of a div when a button inside that div is clicked

2 Answers2