如何使用 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",&nbsp;"mainTR");&nbsp;//use&nbsp;class&nbsp;attr&nbsp;for&nbsp;tr&nbsp;elements移除功能function&nbsp;remove(element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;element.parentNode.remove(element);&nbsp;//remove&nbsp;the&nbsp;clicked&nbsp;tr &nbsp;&nbsp;&nbsp;&nbsp;}现场工作演示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++) {&nbsp; var option = document.createElement('option');&nbsp; option.textContent = selectArr[i];&nbsp; selectPlatform.appendChild(option);}var form1 = document.getElementById('form');form1.addEventListener('submit', addfun);function addfun() {&nbsp; event.preventDefault();&nbsp; //console.log(event)&nbsp; new Movie(event.target[0].value, event.target[1].value, event.target[3].value);&nbsp; clearTable();&nbsp; render();&nbsp; // set();}//get();render();clearTable();render();/*Constructor*/function Movie(MovieName, selectPlatform, monthlyPay) {&nbsp; this.MovieName11 = MovieName;&nbsp; this.selectPlatform11 = selectPlatform;&nbsp; this.monthlyPay11 = monthlyPay * 13.99;&nbsp; this.randomRate = generateRandomRate(100, 10);&nbsp; allMovie.push(this);}function render() {&nbsp; for (let i = 0; i < allMovie.length; i++) {&nbsp; &nbsp; var tr = document.createElement('tr');&nbsp; &nbsp; tr.setAttribute("class", "mainTR");&nbsp; &nbsp; table.appendChild(tr);&nbsp; &nbsp; var td1 = document.createElement('td');&nbsp; &nbsp; td1.textContent = allMovie[i].MovieName11;&nbsp; &nbsp; td1.setAttribute("class", "td1");&nbsp; &nbsp; tr.appendChild(td1);&nbsp; &nbsp; var td2 = document.createElement('td');&nbsp; &nbsp; td2.textContent = allMovie[i].selectPlatform11;&nbsp; &nbsp; td2.setAttribute("class", "td2");&nbsp; &nbsp; tr.appendChild(td2);&nbsp; &nbsp; var td3 = document.createElement('td');&nbsp; &nbsp; td3.textContent = allMovie[i].randomRate;&nbsp; &nbsp; td3.setAttribute("class", "td3");&nbsp; &nbsp; tr.appendChild(td3);&nbsp; &nbsp; var td4 = document.createElement('td');&nbsp; &nbsp; td4.textContent = allMovie[i].monthlyPay11;&nbsp; &nbsp; td4.setAttribute("class", "td4");&nbsp; &nbsp; tr.appendChild(td4);&nbsp; &nbsp; var td5 = document.createElement('td');&nbsp; &nbsp; td5.setAttribute("id", "td5");&nbsp; &nbsp; td5.innerHTML = `<button onclick=remove(this.parentNode)> X </button>`&nbsp; &nbsp; tr.appendChild(td5);&nbsp; }}//Remove trfunction remove(element) {&nbsp; element.parentNode.remove(element);}//helper function:-&nbsp;function generateRandomRate(max, min) {&nbsp; return Math.floor(Math.random() * (max - min + 1) + min);}function clearTable() {&nbsp; table.innerHTML =&nbsp; &nbsp; `&nbsp; &nbsp; <tr>&nbsp; &nbsp; <td>Movie Name</td>&nbsp; &nbsp; <td>Favourite streaming platform</td>&nbsp; &nbsp; <td>Movie Rate</td>&nbsp; &nbsp; <td>Your pay monthly on Streaming platforms</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; `}function set() {&nbsp; var sendJSON = JSON.stringify(allMovie);&nbsp; localStorage.setItem('allMovie', sendJSON)}function get() {&nbsp; var getJSON = localStorage.getItem('allMovie');&nbsp; if (getJSON) {&nbsp; &nbsp; allMovie = JSON.parse(getJSON)&nbsp; }}table,th,td {&nbsp; padding: 1.5%;&nbsp; border: 1px solid black;&nbsp; text-align: center;}button {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; padding: 2px;&nbsp; margin: 2px;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <title>Document</title>&nbsp; <link rel="stylesheet" href="style.css"></head><body>&nbsp; <h3>&nbsp; &nbsp; Streaming platforms price per month is :- <mark>13.99$</mark>&nbsp; </h3>&nbsp; <form id="form">&nbsp; &nbsp; <label>Movie/series Name</label>&nbsp; &nbsp; <input type="text" id="input-form">&nbsp; &nbsp; <label>Select your favourite streaming platform</label>&nbsp; &nbsp; <select id="select-platform">&nbsp; &nbsp; </select>&nbsp; &nbsp; <input type="submit" value="submit" id="submit">&nbsp; &nbsp; <label>Enter how many platforms you watch from(max 7)</label>&nbsp; &nbsp; <input type="number" min="1" max="7">&nbsp; </form>&nbsp; <table id="table">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Movie Name</td>&nbsp; &nbsp; &nbsp; <td>Favourite streaming platform</td>&nbsp; &nbsp; &nbsp; <td>Movie Rate</td>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <!-- <td>You pay monthly on streaming platforms</td> -->&nbsp; <script src="app.js"></script></body></html>

Answer 2

您正在为每一行创建相同的 idtr.setAttribute("id",&nbsp;"mainTR");所以这是无效的，因为 id 必须是唯一的，因此您的 dom-selection 只返回第一次出现您可以附加例如循环的索引以使其唯一