如何在 table 单元格内正确 select 一个 div

Question

我创建了一个根据用户请求插入 table 行和数据的函数。我被要求在 table 单元格的右上角添加一个红色小方块 (div)，单击它会删除 table 行。

到目前为止，我已经编写了一个删除 table 行的函数，但问题是 - 它只需要在小红色 div 出现时完成单击，而不是单击 table 单元格时。这是如何实现的？我已经尝试了几种解决 div 问题的方法，但 none 到目前为止都有效。

非常感谢您的帮助。

<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

从 table 移除 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);
    }

Answer 2

我对您的代码进行了一些更改。删除绑定在 table 上的 deleteRow 并仅在 div 元素上添加事件，然后找到父行元素并将其从 table 中删除这对你有帮助吗？

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 3

我的方式..

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>

如何在 table 单元格内正确 select 一个 div

How to correctly select a div inside a table cell

javascript

delete-row

stoppropagation