Как правильно выбрать div внутри ячейки таблицы

Question

Я создал функцию, которая вставляет строку таблицы и данные по запросу пользователя. Меня попросили добавить маленький красный квадрат (div) в правом углу ячейки таблицы, который при нажатии удаляет строку таблицы.

Я дошел до того, что написал функцию это удаляет строку таблицы, но проблема в том, что это нужно делать только при нажатии на маленький красный div, а не при нажатии на ячейку таблицы. Как это могло быть достигнуто? Я пробовал несколько способов решения проблемы div, но пока ни один из них не сработал.

Буду очень признателен за вашу помощь.

<button class="btn" onclick="createNewTableElement()">Add</button>
<input id="new-item" type="text" value="item">
<table id="main-table" onclick="deleteRow(obj)">

function createNewTableElement() {
  var inputField = document.getElementById("new-item");
  if (inputField.value == "") {
    return;
  }
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  var div = document.createElement("div");
  var cellText = document.createTextNode(inputField.value);
  cell.appendChild(div);
  cell.appendChild(cellText);
  row.appendChild(cell);

  obj = document.getElementById("main-table");
  obj.appendChild(row);
}

function deleteRow(e) {
  document.getElementById('main-table').deleteRow(e);
}

Answer 1

Я сделал некоторые изменения в вашем коде. Удалено deleteRow, связанное с таблицей, добавление события только для элемента div, затем поиск родительского элемента строки и удаление его из таблицы. Вам это помогает?

function createNewTableElement() {
  var inputField = document.getElementById("new-item");
  if (inputField.value == "") {
    return;
  }
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  var div = document.createElement("div");
  div.onclick = deleteRow;
  var cellText = document.createTextNode(inputField.value);
  cell.appendChild(div);
  cell.appendChild(cellText);

  row.appendChild(cell);

  obj = document.getElementById("main-table");
  obj.appendChild(row);
}

function deleteRow(e) {
  document.getElementById('main-table').removeChild(e.target.parentElement.parentElement);
}

#main-table div {
  height: 10px;
  width: 10px;
  border: 1px solid;
  display: inline-block;
  margin-right: 10px;
}

<button class="btn" onclick="createNewTableElement()">Add</button>
<input id="new-item" type="text" value="item">
<table id="main-table">

Answer 2

мой путь ..

const mainTable = document.querySelector('#main-table tbody')
  ,   btAdd     = document.getElementById('btn-Add')
  ,   newItem   = document.getElementById('new-item')
  ;
newItem.oninput=()=>
  {
  btAdd.disabled = (newItem.value === '')
  }
btAdd.onclick=()=>
  {
  let newCell = mainTable.insertRow().insertCell()
    ;       
  newCell.textContent = newItem.value
  newCell.appendChild( document.createElement('div'))
  newItem.value = ''
  btAdd.disabled = true
  }
mainTable.onclick=e=>
  {
  if (!e.target.matches('td div')) return
  mainTable.deleteRow(  e.target.closest('tr').rowIndex -1 )
  }

#main-table {
  border-collapse: collapse;
  margin: 1em;
  }
#main-table thead {
  background-color: cadetblue;
  }
#main-table th {
  padding: .7em;
  width:20em;
  }
#main-table td {
  border: 1px solid grey;
  padding: .5em;
  }
#main-table td div {
  display: block;
  float: right;
  width: 1em;
  height: 1em;
  background-color: crimson;
  cursor: pointer;
  }
#main-table td div:hover {
  border: 1px solid blue;
  }

<button id="btn-Add" disabled >Add</button>
<input id="new-item" type="text" placeholder="item">
<table id="main-table">
  <thead> <th>items list</th> </thead>
  <tbody> </tbody>
</table>

Answer 3

Удалить onclick из таблицы:

  <button class="btn" onclick="createNewTableElement()">Add</button>
  <input id="new-item" type="text" value="item">
  <table id="main-table">

Затем в той же функции вы создаете строку, создаете также красный div и событие:

  function createNewTableElement() {
      var inputField = document.getElementById("new-item");
      if (inputField.value == "") {
        return;
      }
      var row = document.createElement("tr");
      var cell = document.createElement("td");
      var div = document.createElement("div");

      div.addEventListener('click', function(event) {
         // the row call parent (table) and tell removes him self
         row.parentNode.removeChild(row); 
      });

      var cellText = document.createTextNode(inputField.value);
      cell.appendChild(div);
      cell.appendChild(cellText);

      row.appendChild(cell);

      obj = document.getElementById("main-table");
      obj.appendChild(row);
    }