从网站中删除数据而不刷新答案

【问题标题】：deleting data from website without refresh从网站中删除数据而不刷新
【发布时间】：2018-10-15 12:55:07
【问题描述】：

所以我正在使用 firebase 为我的代码保存数据。在我的代码中，我设法将数据保存在firebase中，但我在代码中尝试删除firebase中的数据，我做到了，但innerHTML不会立即删除我必须刷新我的页面才能看到数据消失从网页上，有人可以帮助我吗？

在您查看我的代码之前，我的代码基本上是关于注册一个名为“Russ”的东西，其中包含姓名、地址、手机号码和性别。

希望你们理解我在挪威语写的代码中所做的事情

感谢您的帮助和时间

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Russetid</title>
 </head>

 <body>
 <div>
 <center>
 <h1>Russestyret 2018</h1>
 <form id="registrering">
    <label>Navn: <input id="inpnavn" placeholder="Raahim Khan" type="text" required></label>
    <label>Adresse: <input id="inpadresse" type="text" placeholder="Adresse 12" required></label>
    <label>Mobilnummer: <input id="inpmobilnummer" placeholder="12345678" required></select></label>
    <label>Kjønn: 
      <select id="inpkjønn" required>
        <option value="" selected disabled hidden>Velg kjønn</option>
        <option>Mann</option>
        <option>Kvinne</option>
        <option>intetkjønn</option>
      </select>
    </label>
    <button type="submit">Send inn</button>
</form>
<br>
<br>
<!-- buttons allowing me to see either all the registered russ or only menn, women or neuter -->
<button class="vis" onclick="visAlleruss()">Vis alle</button>
<button class="vis" onclick="visMenn()">Vis Menn</button>
<button class="vis" onclick="visKvinner()">Vis Kvinner</button>
<button class="vis" onclick="visIntetkjønn()">Vis intetkjønn</button>
<table width="500px;">
    <tr><th>Navn</th><th>Adresse</th><th>Mobilnummer</th><th>Kjønn</th><th>Slett:</th></tr>
    <tbody id="txttabell"></tbody>
</table>

<script>
    var inpnavn = document.getElementById("inpnavn");
    var inpadresse =  document.getElementById("inpadresse");
    var inpmobilnummer = document.getElementById("inpmobilnummer");
    var inpkjønn = document.getElementById("inpkjønn");
    var registrering = document.getElementById("registrering");
    var txttabell = document.getElementById("txttabell");

    var database = firebase.database();
    var russ = database.ref();


    //delete function
    function slett(pk) {
        var slettruss = russ.child(pk);
        slettruss.remove();
        var div = document.getElementById(pk);
        txttabell.removeChild(div);
    }


    //register function
    function registrereruss(event) {
        event.preventDefault();

        var navn = inpnavn.value;
        var adresse = inpadresse.value;
        var mobilnummer = inpmobilnummer.value;
        var kjønn = inpkjønn.value;


        inpnavn.value = "";
        inpadresse.value = "";
        inpmobilnummer.value = "";
        inpkjønn.value = "";


        russ.push({
            "navn" : navn,
            "adresse" : adresse,
            "mobilnummer" : mobilnummer,
            "kjønn" : kjønn

        });

    }

    //showing the data on website
    function hentruss(snapshot){
        var pk = snapshot.key;
        var nyruss = snapshot.val();
        var russref = database.ref("russ/" + nyruss.russ);
        russref.on("value", function(snapshotruss){
            var russobj = snapshotruss.val();
            txttabell.innerHTML += `
            <div id="${pk}">
            <tr><td>${nyruss.navn}</td><td>${nyruss.adresse}</td><td>${nyruss.mobilnummer}</td><td>${nyruss.kjønn}</td><td><label class="delete" onclick="slett('${pk}')">X</label></td></tr>
            </div>
            `;

        });
    }
    //functions for the buttons
    function visAlleruss(){
      txttabell.innerHTML = "";
      russ
      .on("child_added", hentruss);    
}

    function visMenn(){
      txttabell.innerHTML = "";
      russ
      .orderByChild("kjønn")
      .equalTo("Mann")
      .on("child_added", hentruss);    
}


    function visKvinner(){
      txttabell.innerHTML = "";
      russ
      .orderByChild("kjønn")
      .equalTo("Kvinne")
      .on("child_added", hentruss);    
}

    function visIntetkjønn(){
      txttabell.innerHTML = "";
      russ
      .orderByChild("kjønn")
      .equalTo("intetkjønn")
      .on("child_added", hentruss);    
}


    registrering.onsubmit = registrereruss;
    russ.on("child_added", hentruss);
</script>

【问题讨论】：

删除功能完成后隐藏html DOM中的数据
不是我在 var div = document.getElementById(pk); txttabell.removeChild(div); }

标签： javascript html

【解决方案1】：

如here 所述，将<tr> 包装在<div> 中是一个非常糟糕的主意。一些浏览器会重新排列 DOM 对象，这会破坏函数slett 中的逻辑。

请删除 <div> 包装。看看将id 移动到<tr> 标签是否适合您。

txttabell.innerHTML += `
<tr id="${pk}"><td>${nyruss.navn}</td><td>${nyruss.adresse}</td><td>${nyruss.mobilnummer}</td><td>${nyruss.kjønn}</td><td><label class="delete" onclick="slett('${pk}')">X</label></td></tr>
`;

【讨论】：

非常感谢，这不仅帮助我解决了删除问题，而且我现在知道如何制作有效的编辑功能，我只是在编辑功能上有一个问题，想知道你是否可以帮助我和那个。我为这个问题创建了一个新线程，但再次感谢:)