如何在javascript中单击按钮时删除完整的行？

Question

我有一个html/php 代码，如下所示。下面的html/php代码的工作方式是在添加行时，我们可以从每一行中选择日期并保存它。

需要做两件事。

1. 单击删除按钮时，它应该从JSON数组中删除该值，因为在保存表单后所有内容都从JSON中提取。

2. 此外，在单击删除按钮时，它应该从 DOM 中删除整个行。

Answer 1

如果您的 json 在前端是已知的（我认为您是在暗示，因为您rowDelete是 JS 函数），您可以通过this对rowDelete. 然后您可以遍历 DOM 以获取相应的兄弟输入字段的值（可能类似于this.parentNode.childNodes[1]）。获得该值后，您可以轻松地将其从 json 中的相应数组中删除：let d = '2020-01-30'let idx = arr.indexOf(d)   let newdates = ([...arr.slice(0,idx), ...arr.slice(idx+1)])data.house_sitting_date = newdates（当然还有一些额外的索引边界检查）。之后，您可以执行类似的 DOM 遍历以从 DOM 中删除相应的元素。

Answer 2

您应该为每个添加的行提供一个与其排名相对应的 id：row.id=i.toString();然后使用以下代码删除该行：var row = document.getElementById(rowrankid);row.parentNode.removeChild(row);

Answer 3

Flash，不幸的是，代码本身的设计不是很专业......行（在php中）有单独的循环，而应该只有1个循环，例如（单击时简单的Javascript绑定示例）：<?phpfor ($i=0; $i<count($data["house_sitting_date"]); $i++){&nbsp; &nbsp; &nbsp;echo '<div class="remove"><a id="'.$data["row_delete"][$i].'" onclick="deleteRow(this);">Remove</a></div>';&nbsp; &nbsp; &nbsp;echo '<div class="date">....</div>';&nbsp; &nbsp; &nbsp;...}?><script> function deleteRow(el) { el.remove(); } </script>此外，许多嵌入的style="".. 代码，而不是您可能使用 1 个样式文件。

Answer 4

我使用您的示例为您准备了一个代码示例，该示例完全符合您的要求。它使用 javascript 获取发布请求发布到您提供的脚本以删除 dom 元素并更新 json 文件。我已经稍微改变了你的一些路径，所以你需要把它们改回来（添加到 ../feeds/ 父目录）一旦用户按下按钮，页面将重新加载，显示从 json 文件加载的更新界面。可以进行一些改进，例如，javascript 在重新加载之前没有检查以确保请求成功，但由于输入是日期选择，它应该没问题。<?phpif(file_exists('./ptp-ess_landing_house.json')){&nbsp; &nbsp; $data = json_decode(file_get_contents('./ptp-ess_landing_house.json'));}if ($_SERVER['REQUEST_METHOD'] === 'POST') {&nbsp; &nbsp; $_POST = json_decode(file_get_contents('php://input'), true);&nbsp; &nbsp; if(isset($_POST['requestType']) && in_array($_POST['requestType'], ['remove'])) {&nbsp; &nbsp; &nbsp; &nbsp; switch ($_POST['requestType']) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'remove' :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Unset the values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unset($data->row_delete[$_POST['data'] -1]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unset($data->house_sitting_date[$_POST['data'] -1]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //We are reindexing the arrays as we have deleted some rows, note that we are using +1 array indexes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $data->row_delete = array_values($data->row_delete);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $data->house_sitting_date = array_values($data->house_sitting_date);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach($data->row_delete as $key=>$value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $data->row_delete[$key] = strval($key+1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Write the file back&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $fp = fopen('./ptp-ess_landing_house.json', 'w');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fwrite($fp, json_encode($data));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fclose($fp);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header("HTTP/1.1 200 OK");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'ok';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; die;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}?><script>&nbsp; &nbsp; function rowDelete(row) {&nbsp; &nbsp; &nbsp; &nbsp; //Make a request to your entry file (index.php here) to do the removal&nbsp; &nbsp; &nbsp; &nbsp; fetch('/index.php', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Accept': 'application/json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify({requestType: 'remove', data: row})&nbsp; &nbsp; &nbsp; &nbsp; }).then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; location.reload();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script><?php if($data) { ?>&nbsp; &nbsp; <form method="post">&nbsp; &nbsp; &nbsp; &nbsp; <div id="rows" style="display:flex; justify-content: center;"><!-- Big div START -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Remove Button START -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="rows-delete">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style="text-align:center;">Delete Rows</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if (empty($data->row_delete)) { ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" id="delete" onclick="rowDelete()">Remove</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="row_delete[]" value="1" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php } else {&nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; foreach ($data->row_delete as $row_delete){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="delete" type="button"&nbsp; onclick="rowDelete(<?php echo $row_delete;?>)">Remove</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php }} ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Remove Button END -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Sitting Date START -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="sitting-days">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 style="text-align:center;">Select Date</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if (empty($data->house_sitting_date)) { ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Select Date START -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="select-date" style="margin-right:30px; margin-top:20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php } else {&nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; foreach ($data->house_sitting_date as $date){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Select Date START -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="select-date" style="margin-right:30px; margin-top:20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Select Date END -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php }} ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Sitting Date END -->&nbsp; &nbsp; &nbsp; &nbsp; </div><!-- Big div END -->&nbsp; &nbsp; </form><?php } else {&nbsp; &nbsp; echo 'Cannot read JSON settings file';}?>