元素未從DOM中刪除

Question

我有代碼從mysql中刪除一條記錄，通過php在表中顯示，然后從頁面中刪除表行。 記錄被刪除，但是頁面或DOM中沒有任何更改，它應該立即更改。

這是要從DOM中刪除的JavaScript代碼

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);
    }
}

像這樣從php調用：

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

$ pk是記錄的主鍵。

生成的html很好（顯然是因為刪除了記錄）

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

但是頁面不會以任何方式更新。

為什么？

Answer 1

我只是將您的代碼放入測試頁，當我刪除以下代碼時，它對我有用：

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

在該行之前的行：

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

document.getElementById(layer).innerHTML=xmlHttp.responseText; 導致錯誤。

編輯：我只是添加我的get_records.php “版本”只是一個php頁面，出於我自己的測試目的，回顯“ result = true”，因此，如果您仍然遇到問題，那么我建議您使用PHP腳本在刪除正確的數據時未返回正確的字符串-您應檢查實際輸出到xmlHttp.responseText

編輯2：您的PHP代碼從不會以responseText可以識別的方式實際返回'result = true'。 你有：

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

因此您將刪除正確的項目，但沒有echo 'result=true'; 任何地方，因此您的if語句檢查responseText永遠不會被調用。

編輯3：我當前的測試代碼（在firefox中可以正常使用[在其他瀏覽器中未測試過]）。

<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>

與php代碼結合使用時效果很好（數據庫連接/查詢內容已注釋掉，供我進行個人測試）。

Answer 2

我不立即明白為什么：

row.parentNode.removeChild(row);

不行...您確定要到達那兒嗎？ 您的錯誤報告存在問題：

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

“圖層”是一個<tr>，您不能在IE中的<tr>上分配innerHTML。 相反，您將獲得“未知的運行時錯誤”異常，並且腳本將停止。

（此外，如果您嘗試將文本直接放在<tr>內而周圍沒有<td>，將會發生什么情況。）