您可以簡單地使用this.parentNode并在函數(shù)中作為參數(shù)傳遞，以從表remove()中刪除單擊的tr元素。
還id需要unique針對(duì)每個(gè)元素，因此請(qǐng)考慮使用class而不是避免出現(xiàn)問題。
tr.setAttribute("class", "mainTR"); //use class attr for tr elements移除功能
function remove(element) {
element.parentNode.remove(element); //remove the clicked tr
}現(xiàn)場工作演示
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>
