Question

I’m trying to get a script to delete a table row.

var i = 1;

function addURL() {
    var tr = document.createElement('tr');
    tr.setAttribute("id", "url_row_" + ++i);
    var td = tr.appendChild(document.createElement('td'));
    td.style.valign = 'middle';

    td = tr.appendChild(document.createElement('td'));
    var input = td.appendChild(document.createElement('input'));
    input.name = 'url[]';
    input.type = 'text';
    input.size = '40'
    var node = document.getElementById('myTable').tBodies[0];
    node.insertBefore(tr, node.children[3]);

    var link = document.createElement("a");
    link.setAttribute("href", ""); 
    link.setAttribute("style", "text-decoration: none;");
    link.setAttribute("onClick", "removeURL('');return false;");
    td = tr.appendChild(document.createElement('td'));
    td=td.appendChild(link)
    td.appendChild(document.createTextNode('-'));
}

function removeURL(divNum) {
    var d = document.getElementById('myTable').tBodies[0];
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}

This can produce as many url_row_(number) text fields as I want. I just don’t know how to delete those rows.

I know doing

link.setAttribute("onClick", "removeURL('url_row_2');return false;");

will delete url_row_2, but what can I put at url_row_2 that will grab whatever id that the row is or what is the correct code to do this?

Answer 1

To do it that way, you would use string concatenation to concatenate i into the handler string to target the given tr.

link.setAttribute("onclick", "removeURL('url_row_" + i + "');return false;");