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();
}

score 1 · Accepted Answer · answered Aug 09 '20 at 08:45

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>

@HamzaSAMI `parentNode` means the parent of the current node. Means the `td` (button is inside the td) - we will send that as an arguments to the `remove()` function. and in the function `element.parentNode` means the parent - actual `tr` which is holding that whole row. You can also read more [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode) — Always Helping, Aug 09 '20 at 09:22
@HamzaSAMI I am not sure what you mean by that. An HTML element and localStorage are two different. localStorage is where you save data and retrieve data. — Always Helping, Aug 09 '20 at 09:44
Is there another site that I can chat with regarding this topic, I mean if we can shareScreen using zoom for example? — Hamza SAMI, Aug 09 '20 at 09:46
@HamzaSAMI I would suggest reading the docs to get clear picture on localStorage and its usage. [Here is the question you can read](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) more about localStorage. Also, to saved your table data (i am guessing that what you want to do) you need to use `JSON.parse` and `JSON.stringify` to `setItem` and `getItem` — Always Helping, Aug 09 '20 at 09:49
yes, I know how to do that, but as you can see when I delete it, deletes the row, but the whole table elements return when I press the submit button again. — Hamza SAMI, Aug 09 '20 at 09:58
@HamzaSAMI Its because you are getting and storing the `data` from array `allMovie`. .remove function only removes the HTML element from the DOM. You need to use array `splice` method to remove that element from the allMovie array as well. I would suggest posting a question separately So that someone can help you properly. Its a total separate question. Thanks — Always Helping, Aug 09 '20 at 10:10
but to be clear, I will not use localStorage to add this feature to the webpage, right? — Hamza SAMI, Aug 09 '20 at 10:38

score 0 · Answer 2 · answered Aug 09 '20 at 08:22

0

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

answered Aug 09 '20 at 08:22

john Smith

17,409
11
76
117

how to do that, can you give me an example – Hamza SAMI Aug 09 '20 at 10:17

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

2 Answers2