Delete row in Javascript onclick

Question

When I click remove row it should remove the entire row keeping the slot empty so that I can fill details later in that row. I tried creating click event I don't know how to create a empty row.

jsfiddle

 var cell1;
 var cell2;
 var cell3;
 var cell4;

 var m = document.querySelector('#inputvechnumber');

 document.querySelector('#vech').addEventListener('click', function () {
     for (var i = 0; i < m.value; i++) {
         console.log(i);
         var numberplatefour = Math.floor(Math.random() * 8800) + 1001;
         var numberplatetwo = Math.floor(Math.random() * 90) + 10;
         var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;
         var table = document.querySelector('.table')
         var row = table.insertRow(0);

         cell1 = row.insertCell(0);
         cell2 = row.insertCell(1);
         cell3 = row.insertCell(2);
         cell4 = row.insertCell(3);

         cell1.innerHTML = nplate;
         cell2.innerHTML = carcolor();
         cell3.innerHTML = 'slot' + i;
         cell4.innerHTML = "REMOVE ROW";
     }
 })

instead of doing cell4.innerHTML = "REMOVE ROW"; attach onclick event to it. add button inside cell4 and add onclick event to it. Inside function you can write code to delete row. — Lalit
– Lalit, Commented Feb 8, 2018 at 8:57
Do you want to delete the row (row.remove() for a given HTMLTableRowElement row), or do you want to empty the row (cell.innerHTML = "" for every given HTMLTableCellElement cell)? — Sebastian Simon
– Sebastian Simon, Commented Feb 8, 2018 at 8:58

xianshenglu · Accepted Answer · 2018-02-08 12:08:59Z

you need a little css to make your question more clear,look at this,is this you want? run this demo,you will see

var cell1;
var cell2;
var cell3;
var cell4;


var m = document.querySelector('#inputvechnumber');

document.querySelector('#vech').addEventListener('click', function() {

  for (var i = 0; i < m.value; i++) {



    console.log(i);
    var numberplatefour = Math.floor(Math.random() * 8800) + 1001;

    var numberplatetwo = Math.floor(Math.random() * 90) + 10;


    var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;

    var table = document.querySelector('.table')
    var row = table.insertRow(0);
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell4 = row.insertCell(3);
    cell1.innerHTML = nplate;
    cell2.innerHTML = carcolor();
    cell3.innerHTML = 'slot' + i;
    cell4.innerHTML = "remove";


  }

})


/*GENERTE TWO COLOR FOR CAR*/

function carcolor() {
  var color = ["black", "white", "blue", "red"];
  var colornum = Math.floor(Math.random() * 4);

  var carcolor = color[colornum];

  return carcolor;
}

/*GENERTE TWO TEXT FOR NUMPLATE*/

function numberplate() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  for (var i = 0; i < 2; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));


  return text;
}

//clear row when click remove row
var table = document.getElementsByClassName('table')[0];
table.addEventListener('click', clearRow, false);

function clearRow(event) {

  var target = event.target;
  if (target.cellIndex === 3) {
    console.log(target.parentNode.children)
    Array.from(target.parentNode.children).forEach(function(ele) {

      ele.innerHTML = '';
    });
  }
}

table {
  height: 20px;
  width: 600px;
}

td {
  background: pink;
  height: 20px;
  border: 1px solid black;
}

<input type="number" name="" id="inputvechnumber" placeholder="vehicle generate">
<button type="submit" id="vech">submit</button>




<table class="table">
  <thead>

  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </tbody>
</table>

felschr · Accepted Answer · 2018-02-08 09:11:18Z

You can add a click event listener to the "remove" cells.

I have adapted your jsfiddle to make it work:

var m = document.querySelector('#inputvechnumber');

document.querySelector('#vech').addEventListener('click', function () {

    for (var i = 0; i < m.value; i++) {
        console.log(i);
        var numberplatefour = Math.floor(Math.random() * 8800) + 1001;

        var numberplatetwo = Math.floor(Math.random() * 90) + 10;


        var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;

        var table = document.querySelector('.table')
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        cell1.innerHTML = nplate;
        cell2.innerHTML = carcolor();
        cell3.innerHTML = 'slot' + i;
        cell4.innerHTML = "remove";

        cell4.addEventListener('click', function () {
            [cell1, cell2, cell3].forEach(cell => cell.innerHTML = '');
        });

    }

})

I moved the cell (cell1, cell2, ...) variable declarations into the for loop scope otherwise the reference would be overridden and the clicking the remove button would always remove the latest added row.

Eliasib13 · Accepted Answer · 2018-02-08 09:16:30Z

If you want to delete the row (not empty the values!) consider editing code above adding a few lines, as follows:

document.querySelector('#vech').addEventListener('click', function ()
    {

        for (var i = 0; i < m.value; i++)
        {   



            console.log(i);
            var numberplatefour = Math.floor(Math.random() * 8800) + 1001;

            var numberplatetwo = Math.floor(Math.random() * 90) + 10;


            var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;

                         var table = document.querySelector('.table')
                        var row = table.insertRow(0);
                  cell1 = row.insertCell(0);
                 cell2 = row.insertCell(1);
                 cell3 = row.insertCell(2);
                 cell4 = row.insertCell(3);
            cell1.innerHTML = nplate;
            cell2.innerHTML = carcolor();
            cell3.innerHTML = 'slot'+i;
            cell4.innerHTML = "remove";


      /**********************************************
       *  Add a class to identify "Remove" buttons  *
       **********************************************/
      cell4.classList.add('remove');

        }

    /*******************************************************
     *  Bind click event and delete the corresponding row  *
     *******************************************************/ 
  var removeNodes = document.querySelectorAll('td.remove');
  removeNodes.forEach(node => {
    node.addEventListener('click', (event) => {
      var nodeElement = event.target;
      var rowToDelete = nodeElement.parentNode;
      rowToDelete.parentNode.removeChild(rowToDelete);
    })
  })

    })

Collectives™ on Stack Overflow

Delete row in Javascript onclick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related