• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 384
  • Last Modified:

Deleting contents of <tbody> from within a seperate <tbody>

Sorry if that title is a bit vague, I'll try to explain what I'm trying to do here.

I have a form that I can dynamically add/delete rows of a form from, and those rows need to generate some content in another table further down the page.  I need to be able to delete the entire contents of the generated table at any point from within the form, but I just can't seem to get it to work.

This is part of the form that is used to generate the table I spoke of, the voucherTable() function is where I need to perform the deleting.
<tbody id="glfNewRow">
<tr>
<td><input id="amount_1" type="text" name="amount_1" size="15" onBlur="voucherTable()"></td>
</tr>
</tbody>

This is the just the tbody tags for my content table, it begins empty and is populated as I go along.
<tbody id="glfVoucherValues">
</tbody>

Here is the portion of the voucherTable() function that I'm trying to perform the delete from.
function voucherTable()
{
var voucher_tbody = 'glfVoucherValues';
var voucher_table = document.all.glfVoucherValues;
//var voucher_table = document.getElementById(voucher_tbody);  // Tried a couple things here

while ((voucher_table = voucher_table.parentElement)  && voucher_table.tagName !="TBODY");
{
      voucher_table.parentElement.removeChild(voucher_table);
}
}

I guess because I'm trying to call this function from outside the tbody block I'm trying to delete, it doesn't like it.  At the moment I get an "Object Required" error on the removeChild line.

This is basically the same code I'm using to delete the rows in my form, only I get the voucher_table variable by doing voucher_table = window.event.srcElement; which works fine.  Of course, if I try to do that here it ends up deleting all of my form, which is kind of counter productive :)

Is this possible??

Thanks
0
souporman
Asked:
souporman
1 Solution
 
RoonaanCommented:
I haven't used element handling a lot, but the code below doesn't work?
document.getElementById('glfVoucherValues').innerHTML = "";
0
 
ThogekCommented:
A couple of things about

    while ((voucher_table = voucher_table.parentElement)  && voucher_table.tagName !="TBODY");

What is the purpose of "voucher_table = voucher_table.parentElement"?  (Setting voucher_table to the original reference's parent?)  Or should the "=" be a "=="?

Should there be a semi-colon at the end of this line?  (That would cause the while block to end at the semi-colon, and the following line to be simply a line on its own, and not part of the while block.)

I'm guessing that you want something more like

    function voucherTable()
    {
        var voucher_tbody = document.getElementById('glfVoucherValues');
        var voucher_row;

        if(voucher_tbody && voucher_tbody.tagName.toUpperCase() == "TBODY")
            while(voucher_row = voucher_tbody.firstChild)
                voucher_tbody.removeChild(voucher_row);
    }
0
 
soupormanAuthor Commented:
Thanks Thogek,

That works much better.

I'm fairly new at this javascript stuff, so I was really just throwing stuff at the code in hopes that something would work, which would probably explain some of the more confusing parts :)

Thanks again!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now