How to delete specific row table using an onClick function in DOM?

Question

How to delete a certain specific row using DOM?

and the problem in /line10 when I press the X button it keeps deleting the first row.

The code in 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

You can simply use this. parentNode and pass as an args in your remove() function to remove the clicked tr element from the table.

Also id needs to be unique for every element so consider using class instead to avoid issues.

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

Remove function

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

Live Working Demo

 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 lang="en"> <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

you are creating the same id for every row

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

so this is invalid as an id must be unique, therefore your dom-selection returns only the first occurance

you could append for example the index of the loop to make it unique