JavaScript Not able to delete the row from my invoice table of invoice maker website using basic JS

ShwetankJoshi · Nov 7, 2022

Thank you! for this great content. I am making a small project of creating a invoice maker website using JS, for adding new items in invoice and deleting it i am making function with several refrence vdo's i managed to create addrow function but not able to create delete row function.also I am new to JS. on creating remove_tr function i am getting the error in the console that

"script.js:34 Uncaught TypeError: This.closest is not a function
at remove_tr (script.js:34:14)
at HTMLButtonElement.onclick (invoice.html:97:80)"

plz help me in this. It will be great for me, Thanks.
the code section is given below for your understanding.
HTML code section =>

HTML:

    <tbody id="table_body">
                <tr class="item-row">
                    <td class="item-name">
                        <div class="Item"><input type="text" name="" placeholder="Enter Item..."><br>
                        </div>
                    </td>
                    <td class="description">
                        <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td>
                    <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td>
                    <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td>
                    <td><span class="price ">650.00</span></td>
                    <td>
                        <div class="action_container">
                            <button class="danger" onclick="remove_tr('This')">
                          <i class="fa fa-close"></i>
                        </button>
                        </div>
                    </td>

JS code section=>

JavaScript:

function create_tr(table_id) {
    let table_body = document.getElementById(table_id);
    let first_tr = table_body.firstElementChild;
    let tr_clone = first_tr.cloneNode(true);
    let ref_Node = document.getElementById("ref_Node");
    table_body.insertBefore(tr_clone, ref_Node);
}
function remove_tr(This) {
    if (This.closest("tbody").childElementCount == 1) {
        alert("You Don't have Permission to Delete This ?");
    } else {
        This.closest("tr").remove();
    }
}

Ordep-20 · Nov 7, 2022

Here the solution for remove the ROW

Here simple way to delete row, the complete row

Code:

function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to remove the first row in the table.</p>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}
</script>

</body>
</html>

Ordep-20 · Nov 7, 2022

Here for Insert Row

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
</script>

</body>
</html>

Ordep-20 · Nov 7, 2022

ShwetankJoshi said:
"script.js:34 Uncaught TypeError: This.closest is not a function

Closest its the element it is very near in you table

Ordep-20 · Nov 7, 2022

ShwetankJoshi said:
Thank you! for this great content. I am making a small project of creating a invoice maker website using JS, for adding new items in invoice and deleting it i am making function with several refrence vdo's i managed to create addrow function but not able to create delete row function.also I am new to JS. on creating remove_tr function i am getting the error in the console that

"script.js:34 Uncaught TypeError: This.closest is not a function
at remove_tr (script.js:34:14)
at HTMLButtonElement.onclick (invoice.html:97:80)"

plz help me in this. It will be great for me, Thanks.
the code section is given below for your understanding.
HTML code section =>

HTML:

<tbody id="table_body"> <tr class="item-row"> <td class="item-name"> <div class="Item"><input type="text" name="" placeholder="Enter Item..."><br> </div> </td> <td class="description"> <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td> <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td> <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td> <td><span class="price ">650.00</span></td> <td> <div class="action_container"> <button class="danger" onclick="remove_tr('This')"> <i class="fa fa-close"></i> </button> </div> </td>

JS code section=>

JavaScript:

function create_tr(table_id) { let table_body = document.getElementById(table_id); let first_tr = table_body.firstElementChild; let tr_clone = first_tr.cloneNode(true); let ref_Node = document.getElementById("ref_Node"); table_body.insertBefore(tr_clone, ref_Node); } function remove_tr(This) { if (This.closest("tbody").childElementCount == 1) { alert("You Don't have Permission to Delete This ?"); } else { This.closest("tr").remove(); } }

You forgot to use <tr> table row, <td> is table data

ShwetankJoshi · Nov 8, 2022

Ordep-20 said:
You forgot to use <tr> table row, <td> is table data

will you elaborate more where i went wrong in the remove_row function , where i forgot to use <tr>. That will help me a lot and i will know where i got wrong

ShwetankJoshi · Nov 8, 2022

Ordep-20 said:

Here the solution for remove the ROW

Here simple way to delete row, the complete row

Code:

function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to remove the first row in the table.</p>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}
</script>

</body>
</html>

thanks alot , let me try it.

ShwetankJoshi · Nov 8, 2022

really really thanks that worked , It was such easy, I implimented it my code . but how can i compare the table row like if it is the first row , it cant be deleted else it can be deleted

ShwetankJoshi · Nov 8, 2022

Ordep-20 said:

Here for Insert Row

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
</script>

</body>
</html>

well this also working but it adding row above my table heading

Ordep-20 said:

Here the solution for remove the ROW

Here simple way to delete row, the complete row

Code:

function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to remove the first row in the table.</p>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}
</script>

</body>
</html>

could you plz tell me how to multiply table cells and then display it in the next cell of the same row like multiplication of "quantity * selling price= price, also the addition of each price column and displaying it as the total of that coloumn , using JS

Ordep-20 · Nov 8, 2022

ShwetankJoshi said:
really really thanks that worked , It was such easy, I implimented it my code . but how can i compare the table row like if it is the first row , it cant be deleted else it can be deleted

The table row count goes from 0 (read first row line) to N (maximum numbers) ; If you are gereting your table on the run with javascript you can add the id in your row exemple: let dataid= document.createAttribute('data-id'); dataid.value= your ID.

Ordep-20 · Nov 8, 2022

Let me understand where you get your values, from PHP, Java, or they came from a JSON???

This code above create a table from a JSON data, the data came from PHP API

JavaScript:

function tableFromJson(values)
{
    var details =values;
    
    var cols = ['NOME', 'LOGIN', 'LOJA' , 'SAP', 'HIERARQUIA'  ,'RECUPERAR SENHA'];


    // Create a table.
    var table = document.createElement("table");
    table.setAttribute("id", "table");

    // Create table header row
    var tr = table.insertRow(); // table row.

    cols.forEach(col => {
        let th = document.createElement("th"); // table header.
        th.innerHTML = col;
        tr.appendChild(th);
    });
    // add json data to the table as rows.
    details.forEach(detail => {
        let tr = table.insertRow();
        Object.keys(detail).forEach(key => {
            let tabCell = tr.insertCell();
            tabCell.innerHTML = detail[key];
        });
        let tabCell = tr.insertCell();
        let button = document.createElement('BUTTON'); // create button
        button.textContent = 'Restaurar';
        button.className='editbtn';
        let dataid = document.createAttribute('data-id'); // attribute for button what holds id
        dataid.value = detail.id;
        button.setAttribute('onclick','recuperar('+detail.login+','+detail.nome+')');
        button.onclick = function() {recuperar(detail.login, detail.nome);};
        tabCell.append(button);
        //======================                                       
    });


    // Now, add the newly created table with json data, to a container.
    var divShowData = document.getElementById('showData');
    divShowData.innerHTML = "";
    divShowData.appendChild(table);
}

Ordep-20 · Nov 8, 2022

ShwetankJoshi said:
well this also working but it adding row above my table heading

could you plz tell me how to multiply table cells and then display it in the next cell of the same row like multiplication of "quantity * selling price= price, also the addition of each price column and displaying it as the total of that coloumn , using JS

Yes of course, first we have to identify what cols its numbers, you can add a simple trick

'<td class="value">50</td> ',
'<td class="qtde">50</td> ',
'<td class="result">50</td> '

You dont need go in css and create a class called value, qtde.

To simplfy your js code you will need have the same columns count for all items, as this example above:

HTML:

<table id="table">
<thead>
  <th>Product</th>
  <th>Qtde</th>
   <th>Value</th>
   <th>Total</th>

</thead>
<tr id="row1">
    <td>Guitar Strings</td>
    <td class="value">12</td>
    <td class="qtde">12</td>
    <td class='result'>Total:</td>
</tr>

<tr id="row2">
    <td>Gretsh Drums</td>
    <td class="value">20</td>
   <td class="qtde">12</td>
    <td class='result'>Total:</td>
</tr>

<tr id="row3">
    <td>Fender Stratocaster</td>
    <td class="value">20</td>
    <td class="qtde">12</td>
    <td class='result'>Total:</td>
</tr>

<tr id="row4">
    <td>Gibson Guitar</td>      
    <td class="value">40</td>
    <td class="qtde">12</td>
    <td class='result'>Total:</td>
</tr>

</table>

Code:

var value = document.querySelectorAll(".value");
var qtde = document.querySelectorAll(".qtde");
var results  =  document.querySelectorAll(".result");

//window.alert(value.length+' , '+qtde.length+' , '+results.length);
var total = 0;

  for (var i = 0; i < value.length; i++)
  {
      results[i].innerText+=' '+  ((value[i].innerText*qtde[i].innerText));
  }

Welcome!

JavaScript Not able to delete the row from my invoice table of invoice maker website using basic JS

ShwetankJoshi

Coder

ShwetankJoshi

Ordep-20

Active Coder

Ordep-20

Active Coder

Ordep-20

Active Coder

Ordep-20

Active Coder

ShwetankJoshi

Coder

ShwetankJoshi

Coder

ShwetankJoshi

Coder

ShwetankJoshi

Coder

Ordep-20

Active Coder

Ordep-20

Active Coder

Ordep-20

Active Coder

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

JavaScript Not able to delete the row from my invoice table of invoice maker website using basic JS

Coder

Active Coder

Active Coder

Active Coder

Active Coder

Coder

Coder

Coder

Coder

Active Coder

Active Coder

Active Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy