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

Question

我有一个html/php 代码，如下所示。下面的html/php代码的工作方式是在添加行时，我们可以从每一行中选择日期并保存它。需要做两件事。单击删除按钮时，它应该从JSON数组中删除该值，因为在保存表单后所有内容都从JSON中提取。此外，在单击删除按钮时，它应该从 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绑定示例）：

<?php

for ($i=0; $i<count($data["house_sitting_date"]); $i++)

{

     echo '<div class="remove"><a id="'.$data["row_delete"][$i].'" onclick="deleteRow(this);">Remove</a></div>';

     echo '<div class="date">....</div>';

     ...

}

?>

<script> function deleteRow(el) { el.remove(); } </script>

此外，许多嵌入的style="".. 代码，而不是您可能使用 1 个样式文件。

Answer 4

我使用您的示例为您准备了一个代码示例，该示例完全符合您的要求。

它使用 javascript 获取发布请求发布到您提供的脚本以删除 dom 元素并更新 json 文件。

我已经稍微改变了你的一些路径，所以你需要把它们改回来（添加到 ../feeds/ 父目录）

一旦用户按下按钮，页面将重新加载，显示从 json 文件加载的更新界面。

可以进行一些改进，例如，javascript 在重新加载之前没有检查以确保请求成功，但由于输入是日期选择，它应该没问题。

<?php

if(file_exists('./ptp-ess_landing_house.json')){

    $data = json_decode(file_get_contents('./ptp-ess_landing_house.json'));

}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $_POST = json_decode(file_get_contents('php://input'), true);

    if(isset($_POST['requestType']) && in_array($_POST['requestType'], ['remove'])) {

        switch ($_POST['requestType']) {

            case 'remove' :

                    //Unset the values

                    unset($data->row_delete[$_POST['data'] -1]);

                    unset($data->house_sitting_date[$_POST['data'] -1]);

                    //We are reindexing the arrays as we have deleted some rows, note that we are using +1 array indexes

                    $data->row_delete = array_values($data->row_delete);

                    $data->house_sitting_date = array_values($data->house_sitting_date);

                    foreach($data->row_delete as $key=>$value) {

                        $data->row_delete[$key] = strval($key+1);

                    }

                    //Write the file back

                    $fp = fopen('./ptp-ess_landing_house.json', 'w');

                    fwrite($fp, json_encode($data));

                    fclose($fp);

                    header("HTTP/1.1 200 OK");

                    echo 'ok';

                    die;

                break;

            default:

        }

    }

}

?>

<script>

    function rowDelete(row) {

        //Make a request to your entry file (index.php here) to do the removal

        fetch('/index.php', {

            method: 'post',

            headers: {

                'Accept': 'application/json',

                'Content-Type': 'application/json'

            },

            body: JSON.stringify({requestType: 'remove', data: row})

        }).then(function(response) {

            location.reload();

            return response;

        });

    }

</script>

<?php if($data) { ?>

    <form method="post">

        <div id="rows" style="display:flex; justify-content: center;"><!-- Big div START -->

            <!-- Remove Button START -->

            <div class="rows-delete">

                <h4 style="text-align:center;">Delete Rows</h4>

                <?php if (empty($data->row_delete)) { ?>

                    <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">

                        <button type="button" id="delete" onclick="rowDelete()">Remove</button>

                        <input type="hidden" name="row_delete[]" value="1" />

                    </div>

                <?php } else {  ?>

                    <?php  foreach ($data->row_delete as $row_delete){ ?>

                        <div class="row-delete" style="margin-right:30px; margin-top:22.5px;">

                            <button id="delete" type="button"  onclick="rowDelete(<?php echo $row_delete;?>)">Remove</button>

                            <input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />

                        </div>

                    <?php }} ?>

            </div>

            <!-- Remove Button END -->

            <!-- Sitting Date START -->

            <div class="sitting-days">

                <h4 style="text-align:center;">Select Date</h4>

                <?php if (empty($data->house_sitting_date)) { ?>

                    <!-- Select Date START -->

                    <div class="select-date" style="margin-right:30px; margin-top:20px;">

                        <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">

                    </div>

                <?php } else {  ?>

                    <?php  foreach ($data->house_sitting_date as $date){ ?>

                        <!-- Select Date START -->

                        <div class="select-date" style="margin-right:30px; margin-top:20px;">

                            <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">

                        </div>

                        <!-- Select Date END -->

                    <?php }} ?>

            </div>

            <!-- Sitting Date END -->

        </div><!-- Big div END -->

    </form>

<?php } else {

    echo 'Cannot read JSON settings file';

}

?>