Javascript/XML/HTML Clear and rewrite

Question

With this Javascript code:

            arrLocations = xmlHTTP.responseText.split("~");
        for (i = 0; i < arrLocations.length; i++){

            // Extract the info for this button.
            strLocation = arrLocations[i];
            arrLocation = strLocation.split(";");

            // Populate the contents of this button.
            elTemp = document.getElementById('loc' + arrLocation[0]);
            if (arrLocation[2].length > 0)
                elTemp.innerHTML = elTemp.innerHTML + '<br><span style="font-size: 12px; font-weight: bold;">' + arrLocation[2] + ' ' + arrLocation[3] + '</span><br><span style="font-size: 10px;"> (' + arrLocation[4] + ')' + '</span><br>';
            else
                elTemp.innerHTML = arrLocation[1];

        }

I am writing to the inside of a button... To display a name and date etc... Like this example:

Here is the button HTML:

<table align="center" cellpadding="3" cellspacing="3" border="0">

                        <tr>
                            <td width="30%" align="center" valign="middle" id="loc1" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(1);">Finesse</td>

                            <td width="5%" align="center" valign="middle" nowrap class="bodyText"></td>
                            <td width="30%" align="center" valign="middle" id="loc2" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(2);">Rework</td>

                            <td width="5%" align="center" valign="middle" nowrap class="bodyText"></td>
                            <td width="30%" align="center" valign="middle" id="loc3" nowrap style="cursor: hand; font-size: 36px; border: 9px outset orangered;" class="bodyText" onClick="updateLocationTable(3);">OP/Masking</td>
                        </tr>
                        <tr>
                            <td align="center" valign="middle" colspan="3" nowrap class="bodyText">&nbsp</td>
                        </tr>

                </table>

My problem is that every time I call this function... It does not clear what is already in the button, it just writes over the top of that... How can I clear what is inside that button's HTML before I do another rewrite?

When I do another add, it ends up looking like this: It keeps the previous write, then rewrites again just adding one... So if A and B are logged the screen shows A + B... if C tries to log in... It keeps A + B but then rewrites A + B and adds C so we end up with A+B+A+B+C

Please show us the actual HTML of the button and then show what it looks like before you make a change and what you want it to look like after you make a change. We need to see the desired before and after HTML. Then, we can advise on the proper code to do that. And, when posting HTML, don't show templatized stuff, please show the actual generated HTML that the browser sees. This is what your Javascript actually sees too so that's what we need to see. — jfriend00, Aug 26 '15 at 17:32
I found some links that can maybe help you : [MDN Node/RemoveChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild), [Stack Overflow remove all child elements of a dom node](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript). But as jfriend00 said, we need to see your code to know where the problem is. — Stéphane Eintrazi, Aug 26 '15 at 20:12
@JeanMel - Both of those are similar to what I am trying to do, except they are suggesting how to clear the nodes related to my object... I don't necessarily want to do this, I want to keep that information because I am going to consistently be writing this information... All I really want to do, is clear the HTML that was written in the previous code, before I write my brand new one.. — Kyle Rickaby, Aug 27 '15 at 12:47
@jfriend00 - Thank you for the helpful tips... I have added the before and after source HTML along with another picture of the output to show before and after! — Kyle Rickaby, Aug 27 '15 at 12:53

score 0 · Answer 1 · answered Aug 27 '15 at 14:12

0

Just so everybody knows... I solved the problem with a simple location.reload()

I put this inside the function that is called when the button is pressed... This allowed the additional write to happen, but also refreshed the page which would load only whats in the database, which was the correct information anyway... I am basically just hiding the problem but it works for what I need it for!

Thanks for all the helpful suggestions!

answered Aug 27 '15 at 14:12

Kyle Rickaby

117
4
15

Special thanks for @jfriend00 who told me to display the source code that is actually loaded, which led me to the idea! – Kyle Rickaby Aug 27 '15 at 14:13

Javascript/XML/HTML Clear and rewrite

1 Answers1