如何正确选择表格单元格内的 div

我创建了一个函数，根据用户的请求插入表行和数据。我被要求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);
}