removing a child node

[omerbutt]

hi there i am making an application in which i have to populate columns that consist of some textfields and some input boxes the problem is at the mozilla's end, it creates a new node and appends the new created or child node to the parent node it is working fine to the point of addition in the Explorer And Mozzila but when it comes to deleting the column it still works perfect in explorer without any javascript or other error but when i try to use Mozzila it gives me error.
the error code is here
Node was not found" code: "8
why is that so i cant understand if it cant find the node then it means tha the name i am providing it is not the right one,but if it is not the right one then how come it could delete it in the explorer
here is my code for that work any help would be highly appreciated

file=allmethods.js
var xmlHttpAddCol;
function AddCol(action,q){
    var url;
    var inc ;
    xmlHttpAddCol=GetXmlHttpObject();
        if (xmlHttpAddCol==null){
            alert ("Browser does not support HTTP Request");
            return;
        } 
    if(action=="add"){
        inc = parseInt(document.addfrm.count.value) + 1;
        url="addcol.php?q="+inc+"&sid="+Math.random();
        xmlHttpAddCol.onreadystatechange=SCAddCol;
        xmlHttpAddCol.open("GET",url,true);
        xmlHttpAddCol.send(null);
    }else if(action=="del"){
        var field=q-1;
        removediv();
        document.getElementById("picture"+field).style.visibility='visible';
        alert("field"+field);
        alert("q"+q);
        if(field>0){
            document.getElementById("tdpicture"+field).style.display='inline';
        }
        inc = parseInt(document.addfrm.count.value) - 1;
        document.getElementById('count').value=inc;
    }
}
function removediv(){
    var divno = document.getElementById('count').value;
    var d = document.getElementById('txtHint'+0);
    var divname ='txtHint'+divno;
    var olddiv =document.getElementById(divname);
    d.removeChild(olddiv);
}
function SCAddCol(){ 
    if (xmlHttpAddCol.readyState==4 || xmlHttpAddCol.readyState=="complete"){    
        var a=xmlHttpAddCol.responseText;
        var b=a.split("|");
        var field=b[1];
        if(field!=0){
            document.getElementById("tdpicture"+field).style.display='none';
        }
        var ni=document.getElementById('txtHint0');
        var numi = document.getElementById('count');
        var inc = parseInt(document.addfrm.count.value) + 1;
        var num = inc;
        numi.value = field+1;
        var resdiv = document.createElement('div');
        alert(resdiv);
        var divIdName = 'txthint'+num;
        resdiv.setAttribute('id',divIdName);
        ni.appendChild(resdiv);
        document.getElementById(divIdName).innerHTML=b[0];
        document.addfrm.count.value = inc;
        document.getElementById("picture"+field).style.visibility='hidden';
    } 
}
 

file=add-product-details.php
                <form name="addfrm" id="addfrm" method="post" action="add-product-version.php">
                  <table cellspacing="1" cellpadding="5" border="1" align="center" width="1002" class="tablebg">
                    <input name="spannumber" id="spannumber" type="hidden" value="0" />
                    <input name="count" id="count" type="hidden" value="0" />
                    <tr><td align="center" class="td_head"><strong>Add Product</strong></td></tr>
                    <tr><td align="left" class="tdTitle"><?=$cat_name;?> Series --> <?=$prod_name;?></td></tr>
                    <tr>
                        <td align="left" class="tdTitle">
                            <table cellspacing="0" cellpadding="0" border="0" align="left">
                                <tr>
                                    <td align="left" class="tdTitle">
                                        <table cellspacing="1" cellpadding="5" border="0" align="left">
                                            <tr><td align="left" class="tdTitle" colspan="2">Version<br /><input type="text" name="versionname[]" id="versionname[]" class="input" /> <input type="button" name="picture0" id="picture0" class="button" value="Add Column" onClick="javascript:AddCol('add');" /></td></tr>
                                            <tr>
                                                <td align="left" valign="top" width="75">Description : </td>
                                                <td align="left" valign="top"><textarea type="text" name="prod_description[]" id="prod_description[]" rows="8" class="textarea"></textarea></td>
                                            </tr>
                                            <tr>
                                                <td align="left" valign="top">Features : </td>
                                                <td align="left" valign="top"><textarea type="text" name="prod_feature[]" id="prod_feature[]" rows="8" class="textarea"></textarea></td>
                                            </tr>
                                            <tr>
                                                <td align="left" valign="middle">Code : </td>
                                                <td align="left" valign="middle"><input type="text" name="prod_code[]" id="prod_code[]" class="input" /></td>
                                            </tr>
                                            <tr>
                                                <td align="left" valign="middle">Price : </td>
                                                <td align="left" valign="middle"><input type="text" name="prod_price[]" id="prod_price[]" class="input" /></td>
                                            </tr>
                                            <tr>
                                                <td align="left" valign="middle">Bend : </td>
                                                <td align="left" valign="middle"><input type="text" name="prod_bend[]" id="prod_bend[]" class="input" /></td>
                                            </tr>
                                            <tr>
                                                <td align="left" valign="middle">2 Checkout ID : </td>
                                                <td align="left" valign="middle"><input type="text" name="prod_co_id" id="prod_co_id" class="input" /></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <div id="txtHint0" style="border:1px solid #FF0000;"></div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="tdTitle"><input name="Submit" id="Submit" type="submit" class="button" value="Submit" title="Submit" /></td>
                    </tr>
                  </table>
                </form>
 
 

FILE=addcol.php
<td align="left" class="tdTitle">
    <table cellspacing="1" cellpadding="5" border="0" align="left">
        <tr>
            <td align="left" class="tdTitle" colspan="2">
                <table cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                        <td align="left" valign="middle">Version<br /><input type="text" name="versionname[]" id="versionname[]" class="input" />&nbsp;</td>
                        <td align="left" valign="middle" id="tdpicture<?=$_GET['q'];?>"><br /><input type="button" name="picture<?=$_GET['q'];?>" id="picture<?=$_GET['q'];?>" class="button" value="Add Column" onclick="AddCol('add');" /></td>
                        <td align="left" valign="middle" id="tddelete<?=$_GET['q'];?>"><br /><input type="button" name="delete<?=$_GET['q'];?>" id="delete<?=$_GET['q'];?>" class="button" value="Delete Column" onclick="AddCol('del','<?=$_GET['q'];?>');" /></td>
                    </tr>
                </table>
               </td>
           </tr>
        <tr>
            <td align="left" valign="top" width="75">Description : </td>
            <td align="left" valign="top"><textarea type="text" name="prod_description[]" id="prod_description[]" rows="8" class="textarea"></textarea></td>
        </tr>
        <tr>
            <td align="left" valign="top">Features : </td>
            <td align="left" valign="top"><textarea type="text" name="prod_feature[]" id="prod_feature[]" rows="8" class="textarea"></textarea></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Code : </td>
            <td align="left" valign="middle"><input type="text" name="prod_code[]" id="prod_code[]" class="input" /></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Price : </td>
            <td align="left" valign="middle"><input type="text" name="prod_price[]" id="prod_price[]" class="input" /></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Bend : </td>
            <td align="left" valign="middle"><input type="text" name="prod_bend[]" id="prod_bend[]" class="input" /></td>
        </tr>
        <tr>
            <td align="left" valign="middle">2 Checkout ID : </td>
            <td align="left" valign="middle"><input type="text" name="prod_co_id[]" id="prod_co_id[]" class="input" /></td>
        </tr>
    </table>
    <div id="txtHint<?= $_GET['q']?>"></div>
</td>
<? $a=$_GET['q'];
    $a=$a-1;
    echo "|".$a;
?>
 

[acoder]

What line is this error occurring on?

[omerbutt]

What line is this error occurring on?

it is in the javascript code line 32 where i am trying to make an object for the parentdiv and then remove the child node of that div.

 var d = document.getElementById('txtHint'+0);
 

thanks for any help in advance,
regards
omer

[acoder]

Why "txtHint"+0? Why not "txtHint0"?

[omerbutt]

Why "txtHint"+0? Why not "txtHint0"?

nops sir it is still with that abnormal behaviour it wont make any difference like that :(

[gits]

have you tried to alert the result from line 32 ... may be the error would more likely be with line 34 where you try the next getElementById() with a dynamic divname ...

so please - just have a look whether it is really line 32 ...

knd regards

[omerbutt]

have you tried to alert the result from line 32 ... may be the error would more likely be with line 34 where you try the next getElementById() with a dynamic divname ...

so please - just have a look whether it is really line 32 ...

knd regards

yes sir i have checked it and it do alerts the object of that olddiv on the line 34 but on alerting "variable d" it says that it is undefined so i think the error is on the line 32 where it is creating the object of the div "txtHint0" which is hard coded means the main div in which i am populating all the divs .... :(, and thats no way the browser is behaving, lemme explain the scenario once again if i missed some thing back. i have made a div in the main page "add-product-details.php"

<div id="txtHint0" ></div>
 

now i have a button on this same page "Add Column" which onclick calls a AJAX funtion which gets the html response from another page "addcol.php"
and puts it into that <div id='txtHint0'></div> throoguh which another same column is populated next to the first column and the button of the "Add column" disappears from the first column and appears on the new column to populate another column if needed and so on , every thing is going fine till the adding process at both ends Mozilla and IE but when it comes to deleting it gives me the same sick error,
i hope so i have quit elaborated the problem , would be no more confusion regarding to the scenario,
hope to get a positive reply,
regards,
omer

[acoder]

When you're ready to delete (and the error occurs when you press delete), check the contents of the txtHint0 div by using e.g. Firebug. What are the contents at that point?

[gits]

hmmm ... i just actually see the following strange thing from one more quick look:

you create an id while adding:

var divIdName = 'txthint' + num;
resdiv.setAttribute( 'id', divIdName );
 

and later on you try to use 'txtHint' ... but the id should be case sensitive and so may be the problem?

kind regards

[omerbutt]

hmmm ... i just actually see the following strange thing from one more quick look:

you create an id while adding:

var divIdName = 'txthint' + num;
resdiv.setAttribute( 'id', divIdName );
 

and later on you try to use 'txtHint' ... but the id should be case sensitive and so may be the problem?

kind regards

good to see you here gits :) well these two lines that you coded are used to assign the id to a new div that is created IN the "txtHint0" that is the main div or the parent div you can and the error is not on the line 32 where i try to use the var d for holding the object for the main div i.e txtHint0 it says that it is undefined

[gits]

i know ... but in line 33 you create a divname:

var divname ='txtHint'+divno;
 

and isn't that a div IN the parent? that you try to refer to? to remove it then from the parent?

kind regards

[omerbutt]

i know ... but in line 33 you create a divname:

var divname ='txtHint'+divno;
 

and isn't that a div IN the parent? that you try to refer to? to remove it then from the parent?

kind regards

yes the new created div is in the parent div,i have a hidden input field on the main page with the name count this field is incremented as the "AddColumn" button is pressed and that value is then passed through the ajax function to the addcol.php file where this value is concatinated with the div elements specially with the
"Add Column" and the "Delete Column" buttons ids and then passed through the onclik function of the Delete button , every new div created has the prefix "txtHint"+ a suffix that has a dynamic or you can say incrementing value which regards to the last div created means if initially you click on the add column button it increments the value in he count input field then the new div created has the name "txtHint1"in which 1 is comming from the value of the counter and so on, now if i have to delete that column the same value 1 is passed through he function into that RemoveDiv(); function, the line which you mentioned tehre i was trying to get the value directly from the count field because i thaught that may be the value is not the right one you can change that line to

var divno =q; 

and yes one thing i just misguided you that it gives me error on the last line where i am trying to remove the child node where as i have alerted all the values and now all the values are being alerted means d,divno,divname and even the old div all when alerted no one is giving me error or blank value but as soon it comes to the last line it says that node not found
regards,
omer

[gits]

so the alerts you did are what you expected? ... then please post what the following alert says when you want to remove a node:

function removediv(){
    var divno = document.getElementById('count').value;
    var d = document.getElementById('txtHint'+0);
 
    alert(d.innerHTML);    
 
    var divname ='txtHint'+divno;
    var olddiv =document.getElementById(divname);
    d.removeChild(olddiv);
}

[omerbutt]

so the alerts you did are what you expected? ... then please post what the following alert says when you want to remove a node:

function removediv(){
    var divno = document.getElementById('count').value;
    var d = document.getElementById('txtHint'+0);
 
    alert(d.innerHTML);    
 
    var divname ='txtHint'+divno;
    var olddiv =document.getElementById(divname);
    d.removeChild(olddiv);
}

according to the above given code the alert gives me the html code for the last created div here is the code

<div id="txthint1"><td class="tdTitle" align="left" width="600">
    <table align="left" border="0" cellpadding="5" cellspacing="1" width="300">
        <tbody><tr>
            <td class="tdTitle" colspan="2" align="left">
                <table align="left" border="0" cellpadding="0" cellspacing="0">
                    <tbody><tr>
                        <td align="left" valign="middle">Version<br><input name="versionname[]" id="versionname[]" class="input" type="text">&nbsp;</td>
                        <td id="tdpicture1" align="left" valign="middle"><br><input name="picture1" id="picture1" class="button" value="Add Column" onclick="AddCol('add');" type="button"></td>
                        <td id="tddelete1" align="left" valign="middle"><br><input name="delete1" id="delete1" class="button" value="Delete Column" onclick="AddCol('del','1');" type="button"></td>
                    </tr>
                </tbody></table>
               </td>
           </tr>
        <tr>
            <td align="left" valign="top" width="75">Description : </td>
            <td align="left" valign="top"><textarea type="text" name="prod_description[]" id="prod_description[]" rows="8" class="textarea"></textarea></td>
        </tr>
        <tr>
            <td align="left" valign="top">Features : </td>
            <td align="left" valign="top"><textarea type="text" name="prod_feature[]" id="prod_feature[]" rows="8" class="textarea"></textarea></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Code : </td>
            <td align="left" valign="middle"><input name="prod_code[]" id="prod_code[]" class="input" type="text"></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Price : </td>
            <td align="left" valign="middle"><input name="prod_price[]" id="prod_price[]" class="input" type="text"></td>
        </tr>
        <tr>
            <td align="left" valign="middle">Bend : </td>
            <td align="left" valign="middle"><input name="prod_bend[]" id="prod_bend[]" class="input" type="text"></td>
        </tr>
        <tr>
            <td align="left" valign="middle">2 Checkout ID : </td>
            <td align="left" valign="middle"><input name="prod_co_id[]" id="prod_co_id[]" class="input" type="text"></td>
        </tr>
    </tbody></table>
</td>
</div>
 

[gits]

so now ... have a look at the first line there:

[HTML]<div id="txthint1"><td class="tdTitle" align="left" width="600">
[/HTML]
so i assume now you want to remove that div? but as we see the id="txthint1' and not txtHint1 as you try to refer in your remove function?

kind regards

[omerbutt]

so the alerts you did are what you expected? ... then please post what the following alert says when you want to remove a node:

function removediv(){
    var divno = document.getElementById('count').value;
    var d = document.getElementById('txtHint'+0);
 
    alert(d.innerHTML);    
 
    var divname ='txtHint'+divno;
    var olddiv =document.getElementById(divname);
    d.removeChild(olddiv);
}

hey gits just when i posted the last reply i saw the main error which is in the very first line see the id of the div :D it is "txthint1 not txtHint1 :D man that was very common but irritating mistake and was occurin in the mozilla because mozilla is case sensitive and explorer is not thats why it was deleting in the IE but not mozilla thanks to you gits you made a goooood ALERT() cheers many thanks
regards,
omer

[omerbutt]

so now ... have a look at the first line there:

[HTML]<div id="txthint1"><td class="tdTitle" align="left" width="600">
[/HTML]
so i assume now you want to remove that div? but as we see the id="txthint1' and not txtHint1 as you try to refer in your remove function?

kind regards

:D yeah i just got late poting the reply but i also saw the error and mentioned in my post any ways thanks aloots Gits
You are the MAN ;)
regards,
omer

[gits]

no problem ... the alert just showed you what i was trying to explain before :) ... glad to hear you got it working now :)

kind regards

[omerbutt]

no problem ... the alert just showed you what i was trying to explain before :) ... glad to hear you got it working now :)

kind regards

:) thanks a bundle :)
regards,
omer

[acoder]

Good spot, gits.

that was very common but irritating mistake and was occurin in the mozilla because mozilla is case sensitive and explorer is not thats why it was deleting in the IE but not mozilla

That's shoddy by IE. JavaScript is case-sensitive, not case-insensitive like VB.

[omerbutt]

Good spot, gits.
That's shoddy by IE. JavaScript is case-sensitive, not case-insensitive like VB.

:) what to say ?...... any ways thanks alot guys ,
regards,
omer