删除网站上的数据而不刷新

时间:2018-05-05 02:07:19

标签: javascript html

所以我使用firebase来保存代码的数据。在我的代码中我已经设法在firebase中保存数据,但我在我的代码中尝试做的是删除firebase中的数据,我发生了但是innerHTML不会立即删除我必须刷新我的页面才能看到数据消失从网页上,有人可以帮助我吗?

在你查看我的代码之前,我的代码基本上是关于注册名为" Russ"姓名,地址,手机号码和性别。

希望你们明白我在代码中做的是用挪威语编写的

感谢您的帮助和时间

- WorkspaceProjectX  
--- ApiFolder   (maybe /usr/share/www/api)  
--- DocsFolder  (maybe /home/user/projx/html/docs)  
--- WebFolder   (maybe /usr/share/www/web)  

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

1 个答案:

答案 0 :(得分:0)

正如here解释的那样,将<tr>包裹在<div>中是一个非常糟糕的主意。 一些Web浏览器将重新排列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>
`;