Delete row from table dynamically created in javaScript

Question

I want to delete a row from a table created by JavaScript. i tried the code from different post on this page but doesn't solve it.

function value_pass()
  {
var Delete =  document.createElement("input");
                Delete.type="button";
                Delete.name = "del"
                Delete.value = "Delete";
                Delete.onclick = function(o)
                {
                      var r = o.parentElement.parentElement;                                          
                      document.getElementById("table").deleteRow(r.rowIndex);
               }

var order_no = document.getElementById("Order_no");
var quantity = document.getElementById("quantity");
var type = document.getElementById("Recipe");
var recipe = type.options[type.selectedIndex].text;

var body1 = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
tbl.setAttribute("id","table");
var tblbody = document.createElement("tbody");
tbl.setAttribute("border","2");

var col = document.createElement("td");

for (var j = 0; j < 1; j++) 
{
    var rows = document.createElement("tr");
    for (var i = 0; i < 4; i++)
    {
        var col1 = document.createElement("td");
        var col2 = document.createElement("td");
        var col3 = document.createElement("td");
        var col4 = document.createElement("td");
        var col5 = document.createElement("td");

        var col1text = document.createTextNode(order_no.value);
        var col2text = document.createTextNode(recipe);
        var col3text = document.createTextNode(quantity.value);
        var col4text = document.createTextNode();

            //also want to put checked values in table row


    }
    col1.setAttribute("width","150");
    col2.setAttribute("width","150");
    col3.setAttribute("width","150");
    col4.setAttribute("width","150");


    col1.appendChild(col1text);
    col2.appendChild(col2text);
    col3.appendChild(col3text);
    col4.appendChild(col4text);
    col5.appendChild(Delete);

    rows.appendChild(col1);
    rows.appendChild(col2);
    rows.appendChild(col3);
    rows.appendChild(col4);
    rows.appendChild(col5);

    tblbody.appendChild(rows);
} tbl.appendChild(tblbody);
body1.appendChild(tbl);
}

The function will be called by a button in HTML its an order form that

and also want to know about the checked values of checkbox to put in the table row.

the Delete button is mentioned above but the function is not working in it. and yeah the second one i mean to say the cell contain checkbox values — Tanveer Jan
– Tanveer Jan, Commented Nov 22, 2013 at 15:10

Billy · Accepted Answer · 2013-11-22 15:38:52Z

5

You can use :

document.getElementById("myTable").deleteRow(0); //Where 0 is your row.

Explained : http://www.w3schools.com/jsref/met_table_deleterow.asp

Edit:

To delete the current row, set this on your button: onclick="deleteRow(this), with the following code in that function:

function deleteRow(t)
{
    var row = t.parentNode.parentNode;
    document.getElementById("myTable").deleteRow(row.rowIndex);
    console.log(row);
}

edited Nov 22, 2013 at 15:38

answered Nov 22, 2013 at 15:02

Billy

1,1049 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tanveer Jan Over a year ago

but i have a button with every row that i want to delete the adjacent row to the button

Billy Over a year ago

Edited answer. Please try :-)

Tanveer Jan Over a year ago

i created the table in javascript and the button in table is also created with javascript function.

Collectives™ on Stack Overflow

Delete row from table dynamically created in javaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related