How to remove a specific container when it has no unique ID

Question

I've implemented an HTML task board. When the user press on the "Save" button - then the JS code adds the user task into a container. Each task container has a "Remove" button, But when pressing on it - it deletes the first container child.

codes:

The "Save" button code:

 var mission =
 {     
    text: document.getElementById('textarea').value,
    date: document.getElementById('date').value,
    time: document.getElementById('time').value
 };

 const rows = document.getElementById('rows');
 const cell = document.createElement('div');
 const id = document.createAttribute('id');
 id.value = "div-cell";
 cell.setAttributeNode(id);
 cell.innerHTML = '<button id="remove-button" type="button" class="btn btn-default" aria-label="Right Align" onClick="removeButton()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button><textarea></textarea><div><input><input></div>';
 rows.appendChild(cell);

 const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input'); 

 textarea.value = mission.text;
 dateinput.value = mission.date;
 timeinput.value = mission.time;

The "remove" button code:

function removeButton(){
  document.getElementById('rows').removeChild(document.getElementById('div-cell'));
}

I do understand that my code - looks for the first child and removes it. Can someone tell me how to remove the container which was pressed and not the first.

I thought about an array, but I've no idea how to implement it.

Thanks for the helpers

OK, but if all 'div' elements will have the same class, it's not like they have the same id? — Hodiya Eyal, Apr 07 '20 at 03:19

score 1 · Accepted Answer · answered Apr 07 '20 at 03:22

You need the handler to get a reference to the clicked button (or its container) so that it can remove the container - the handler needs a parameter or it needs to check the event for that.

Another issue is that you're using an inline handler, which have too many problems. Attach the listener with Javascript instead, and inside the handler, you'll be able to reference the cell in the outer scope, and .remove() it:

button.onclick = () => cell.remove();

var mission = {
  text: 'text',
  date: 'date',
  time: 'time'
};

const rows = document.getElementById('rows');
const cell = document.createElement('div');
cell.innerHTML = '<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-remove" aria-hidden="true">Remove</span></button><textarea></textarea><div><input><input></div>';
rows.appendChild(cell);

const [button, textarea, dateinput, timeinput] = cell.querySelectorAll('button, textarea, input');

button.onclick = () => cell.remove();
textarea.value = mission.text;
dateinput.value = mission.date;
timeinput.value = mission.time;

<div id="rows"></div>

Note that there should be no more than one element with a particular ID in a document. In this case, there's no need for any id other than the rows container anyway.

Ginius! I got the idea! and this is how I've implemented: cell.firstChild.addEventListener('click', function(){ rows.removeChild(cell); — Hodiya Eyal, Apr 07 '20 at 03:38
When an answer solves your problem, you may consider marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :) — CertainPerformance, Apr 07 '20 at 04:01

score 0 · Answer 2 · answered Apr 07 '20 at 03:51

I suggest to create the button with createElement so you can listen to the click event, and attach that to the container cell like so

// The cell which contains the button itself is being passed as a parameter
createRemoveButton = (cell) => {
    const button = document.createElement('button');
    button.addEventListener('click', _ => {
        document.getElementById('rows').removeChild(cell);
    });
    // Apply any styles needed...
    button.style.height = '20px';
    button.innerHTML = 'Remove';
    return button;
}

Then, when you are creating your div-cell element, just append the generated button with the callback on the click event.

// ...
const rows = document.getElementById('rows');
const cell = document.createElement('div');
const id = document.createAttribute('id');
id.value = 'div-cell';
cell.setAttributeNode(id);

const btn = createRemoveButton(cell);
cell.innerHTML = '<textarea></textarea><div><input><input></div>';
cell.appendChild(btn);

rows.appendChild(cell);
//...

How to remove a specific container when it has no unique ID

2 Answers2