如何正确选择表格单元格内的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

从表中删除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);
    }