Javascript - 单击 div 内的按钮时检索该 div 的值

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.

Answer 1

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

Answer 2

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