Dynamic Add Remove Rows

Javascript only

by TheFiddler

HTML

Not Quite Working
<div id="brandSet">
    <table border="1" id="dynamicBrandTable">
        <thead>
        <tr>
            <td>Link</td>
            <td>Image</td>
            <td>Alt</td>
            <td></td>
        </tr>
        </thead>
        <tbody id="dynamicBrandBody">
        <tr >
            <td>
                <input type="text" id="brandLink1" />
            </td>
            <td>
                <input type="text" id="brandImage1" />
            </td>
            <td>
                <input type="text" id="brandAlt1" />
            </td>
            <td>
                <input type="button" onclick="deleteRow(this)" id="deleteRow" value="Delete " />
            </td>
        </tr>
        </tbody>
    </table>
    <input type="button" id="addNewBrand" value="Add" onclick="insRow()" />
</div>

JavaScript

function deleteRow(row) {

    var x = document.getElementById('dynamicBrandTable');
    var len = x.rows.length;

    console.log(x.rows);
    console.log(len);
    
    if (len > 1) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('dynamicBrandTable').deleteRow(i);
    }
}

function insRow() {

    var x = document.getElementById('dynamicBrandTable');
        var b = document.getElementById('dynamicBrandTable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;

    console.log(len);
    
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

    b.appendChild(new_row);
}