element not being removed from DOM

Question

I have code to delete a record from mysql, displayed in a table via php, and subsequently delete the table row from the page. The record is deleted, however nothing changes in the page or the DOM, and it should change instantly.

Here is the javascript code to delete from the DOM

function deleteItem(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
                if(xmlHttp.responseText == 'result=true') {
                        var row = document.getElementById(layer);
                        row.parentNode.removeChild(row);
                }

        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
                document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
        deleteItem(layer, url);
    }
}

Which is called from php like so:

echo '<tr id=\"article_' . $pk . '\">' . "\n";   
echo '<td><a href="#" onclick="deleteRec(\'article_' . $pk .'\', \'' . $pk . '\')">DELETE</a></td>' . "\n"; 

$pk is the primary key of the record.

The resultant html is fine(obviously since the record is deleted)

<a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>

But the page is not updated in any way.

Why?

Answer 1

I just threw your code into a test page and it works for me when I remove the:

 document.getElementById(layer).innerHTML=xmlHttp.responseText;

line that's just before the line:

} else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {

The document.getElementById(layer).innerHTML=xmlHttp.responseText; is causing an error.

Edit: I'll just add that my 'version' of get_records.php is simply a php page the echos 'result=true' for my own testing purposes, so if you're still running into issues then I would suggest that your PHP script, while deleting the correct data, isn't returning the correct string - you should check what actually gets output to xmlHttp.responseText

Edit 2: Your PHP code never actually returns 'result=true' in a manner which your responseText will recognise. You have:

if($cmd=="deleterec") {
    mysql_query('DELETE FROM AUCTIONS WHERE ARTICLE_NO = ' . $pk);
}

so you will delete the correct item but you have no echo 'result=true'; anywhere so your if statement checking for responseText is never going to get called.

EDIT 3: My current test code (which works fine in firefox [untested in other browsers]).

<script type="text/javascript">
    var xmlHttp;

    function GetXmlHttpObject(){
        var objXMLHttp = null;

        if (window.XMLHttpRequest){
        try{
            objXMLHttp = new XMLHttpRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.createRequest){
        try{
            objXMLHttp = new window.createRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.ActiveXObject){
        try {
            objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try {
                objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                objXMLHttp = false;
            }
        }
    }

    return objXMLHttp;
  }
 function deleteItem(layer, url) {
 var xmlHttp=GetXmlHttpObject();
 if(xmlHttp==null) {
    alert("Your browser is not supported?");
 }
 xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            console.log(xmlHttp.responseText);
            if(xmlHttp.responseText == 'result=true') {
                    var row = document.getElementById(layer);
                    row.parentNode.removeChild(row);
            }
            //document.getElementById(layer).innerHTML=xmlHttp.responseText;
    } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            //document.getElementById(layer).innerHTML="loading";
    }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 }
 function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
    deleteItem(layer, url);
    }
 }
</script>


<table>
      <tr id="article_260343387801">
      <td><a href="#" onclick="updateByPk()">Name</a></td>
      <td><a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>
      </td>
      </tr>
 </table>

This works fine in combination with the php code (with the database connection/query stuff commented out for my personal testing).

Answer 2

I don't immediately see why:

row.parentNode.removeChild(row);

wouldn't work... are you sure you're actually getting there? Your error reporting is problematic:

document.getElementById(layer).innerHTML=xmlHttp.responseText;

‘layer’ is a <tr>, and you can't assign innerHTML on a <tr> in IE. Instead, you will get an ‘Unknown runtime error’ exception and the script will stop.

(Plus, it's undefined what would happen if you tried to put text directly inside a <tr> without a <td> around it.)