如何使用 DOM 中的 onClick 函数删除特定的行表？

Question

如何使用 DOM 删除某个特定行？当我按下 X 按钮时， /line10中的问题一直在删除第一行。Fiddle中的代码function render(){ for (let i = 0; i < allMovie.length; i++) {    var tr = document.createElement('tr');    tr.setAttribute("id", "mainTR");    table.appendChild(tr);    var td1 = document.createElement('td');    td1.textContent = allMovie[i].MovieName11;    td1.setAttribute("class", "td1");    tr.appendChild(td1);        var td2 = document.createElement('td');    td2.textContent = allMovie[i].selectPlatform11;    td2.setAttribute("class", "td2");    tr.appendChild(td2);    var td3 = document.createElement('td');    td3.textContent = allMovie[i].randomRate;    td3.setAttribute("class", "td3");    tr.appendChild(td3);    var td4 = document.createElement('td');    td4.textContent = allMovie[i].monthlyPay11;    td4.setAttribute("class", "td4");    tr.appendChild(td4);    var td5 = document.createElement('td');    td5.setAttribute("id", "td5");    td5.innerHTML = `<button onclick=remove()> X </button>`    tr.appendChild(td5);}}function remove() { /line10  var removeOBJ = document.getElementById("mainTR");  return removeOBJ.remove();} 

Answer 1

您可以简单地使用this.parentNode并在函数中作为参数传递，以从表remove()中删除单击的tr元素。

还id需要unique针对每个元素，因此请考虑使用class而不是避免出现问题。

tr.setAttribute("class", "mainTR"); //use class attr for tr elements

移除功能

function remove(element) {
    element.parentNode.remove(element); //remove the clicked tr
    }

现场工作演示

var allMovie = [];

var selectArr = ['netflix', 'Amazon Prime video', 'HBO', 'Hulu', 'Apple TV Plus', 'Disney Plus', 'Crunchyroll'];

var selectPlatform = document.getElementById('select-platform');

var table = document.getElementById('table');

for (let i = 0; i < selectArr.length; i++) {

  var option = document.createElement('option');

  option.textContent = selectArr[i];

  selectPlatform.appendChild(option);

}

var form1 = document.getElementById('form');

form1.addEventListener('submit', addfun);

function addfun() {

  event.preventDefault();

  //console.log(event)

  new Movie(event.target[0].value, event.target[1].value, event.target[3].value);

  clearTable();

  render();

  // set();

}

//get();

render();

clearTable();

render();

/*Constructor*/

function Movie(MovieName, selectPlatform, monthlyPay) {

  this.MovieName11 = MovieName;

  this.selectPlatform11 = selectPlatform;

  this.monthlyPay11 = monthlyPay * 13.99;

  this.randomRate = generateRandomRate(100, 10);

  allMovie.push(this);

}

function render() {

  for (let i = 0; i < allMovie.length; i++) {

    var tr = document.createElement('tr');

    tr.setAttribute("class", "mainTR");

    table.appendChild(tr);

    var td1 = document.createElement('td');

    td1.textContent = allMovie[i].MovieName11;

    td1.setAttribute("class", "td1");

    tr.appendChild(td1);

    var td2 = document.createElement('td');

    td2.textContent = allMovie[i].selectPlatform11;

    td2.setAttribute("class", "td2");

    tr.appendChild(td2);

    var td3 = document.createElement('td');

    td3.textContent = allMovie[i].randomRate;

    td3.setAttribute("class", "td3");

    tr.appendChild(td3);

    var td4 = document.createElement('td');

    td4.textContent = allMovie[i].monthlyPay11;

    td4.setAttribute("class", "td4");

    tr.appendChild(td4);

    var td5 = document.createElement('td');

    td5.setAttribute("id", "td5");

    td5.innerHTML = `<button onclick=remove(this.parentNode)> X </button>`

    tr.appendChild(td5);

  }

}

//Remove tr

function remove(element) {

  element.parentNode.remove(element);

}

//helper function:- 

function generateRandomRate(max, min) {

  return Math.floor(Math.random() * (max - min + 1) + min);

}

function clearTable() {

  table.innerHTML =

    `

    <tr>

    <td>Movie Name</td>

    <td>Favourite streaming platform</td>

    <td>Movie Rate</td>

    <td>Your pay monthly on Streaming platforms</td>

    </tr>

    `

}

function set() {

  var sendJSON = JSON.stringify(allMovie);

  localStorage.setItem('allMovie', sendJSON)

}

function get() {

  var getJSON = localStorage.getItem('allMovie');

  if (getJSON) {

    allMovie = JSON.parse(getJSON)

  }

}

table,

th,

td {

  padding: 1.5%;

  border: 1px solid black;

  text-align: center;

}

button {

  width: 100%;

  height: 100%;

  padding: 2px;

  margin: 2px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <h3>

    Streaming platforms price per month is :- <mark>13.99$</mark>

  </h3>

  <form id="form">

    <label>Movie/series Name</label>

    <input type="text" id="input-form">

    <label>Select your favourite streaming platform</label>

    <select id="select-platform">

    </select>

    <input type="submit" value="submit" id="submit">

    <label>Enter how many platforms you watch from(max 7)</label>

    <input type="number" min="1" max="7">

  </form>

  <table id="table">

    <tr>

      <td>Movie Name</td>

      <td>Favourite streaming platform</td>

      <td>Movie Rate</td>

    </tr>

  </table>

  <!-- <td>You pay monthly on streaming platforms</td> -->

  <script src="app.js"></script>

</body>

</html>

Answer 2

您正在为每一行创建相同的 id

tr.setAttribute("id", "mainTR");

所以这是无效的，因为 id 必须是唯一的，因此您的 dom-selection 只返回第一次出现

您可以附加例如循环的索引以使其唯一