How to Delete Element that has no ID? Select Element after hover?

February 7, 2023

I have a list with several boxes with the class (.box), these boxes cannot have an id attribute, when hovering over them it will show the Delete button (#btnDel) to remove the Element, the question is: How to select this element on hover, the delete button is a specific element, but this element does not have an id attribute, how do I make this selection (document…..)?

When hovering over the div.box, show the delete button and include the onclick=deleteElem(‘?’) function to remove the specific div.box.

const list = document.getElementById('list');
//--Select Delete Button id(btnDel) --//
const btnDel = document.getElementById('btnDel');

list.addEventListener('mouseenter', e => {
  if (e.target.matches('.box')) {
    //-- coordinates ---//
    let rect = e.target.getBoundingClientRect();
    //-- Show Delete Button --//
    btnDel.style.top = rect.top + 'px';
    btnDel.style.display = 'block';

    //- How to Delete Element that has no ID? Is there another way to Select the Element Mouse Hover class(.box) ? -- ///
    btnDel.setAttribute('onclick', "deleteElem('?')");

  }
}, true);

function deleteElem(id) {
  var elem = document.getElementById(id);
  elem.remove();
}

#list {
  max-width: 200px;
}

#list div {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  font-weight: 600;
}

#btnDel {
  cursor: pointer;
  position: absolute;
  display: none;
  left: 204px;
}

#btnDel div {
  background-color: #ffdfdf;
  padding: 7px;
  border-radius: 7px;
  color: red;
  font-size: 15px;
}

<div id="list">
  <div class="box">Box 01</div>
  <div class="box">Box 02</div>
  <div class="box">Box 03</div>
  <div class="box">Box 04</div>
  <div class="box">Box 05</div>
</div>

<div id="btnDel">
  <div>
    (X) Delete
  </div>
</div>

>Solution :

You can store the current hovered element and remove that.

const list = document.getElementById('list');
const btnDel = document.getElementById('btnDel');
let hoveredEl;
list.addEventListener('mouseenter', e => {
  if (e.target.matches('.box')) {
    let rect = e.target.getBoundingClientRect();
    btnDel.style.top = rect.top + 'px';
    btnDel.style.display = 'block';
    hoveredEl = e.target;
  }
}, true);
document.getElementById('btnDel').addEventListener('click', e => {
  hoveredEl?.remove();
  e.currentTarget.style.display = '';
});

#list{max-width:200px}#list div{padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:5px;margin:10px;font-weight:600}#btnDel{cursor:pointer;position:absolute;display:none;left:204px}#btnDel div{background-color:#ffdfdf;padding:7px;border-radius:7px;color:red;font-size:15px}

<div id="list">
  <div class="box">Box 01</div>
  <div class="box">Box 02</div>
  <div class="box">Box 03</div>
  <div class="box">Box 04</div>
  <div class="box">Box 05</div>
</div>
<div id="btnDel">
  <div>
    (X) Delete
  </div>
</div>