删除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";
     }
 })

Answer 1

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> 

Answer 2

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.

Answer 3

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

    })