如何在Javascript中添加/删除一行？答案

【问题标题】：How to add/delete a row in Javascript?如何在Javascript中添加/删除一行？
【发布时间】：2019-12-12 20:14:39
【问题描述】：

我正在编写如下所示的 html/php 代码。

<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
    <div class="select-date" style="margin-right:30px;">
        <h4 style="text-align:center;">Select Date</h4>
        <input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
    </div>
    <div class="yes-no">
        <h4 style="text-align:center;">Yes/No</h4>
        <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
            <option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
            <option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
            <option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
        </select>
    </div>
</div>

上面的html/php代码显示如下截图：

点击保存按钮，上面的表格（如屏幕截图所示）会保存在以下JSON文件中：

$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];

if(file_exists('../feeds/ptp-ess_landing_house.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}

问题陈述：

我想知道我需要添加哪些 JS 代码才能添加/删除行。

点击+号，它应该添加一行。点击 - 符号，它应该删除一行。

当我说添加一行时，它意味着添加另一个选择的行。

【问题讨论】：

当您说“添加一行”时，您的意思是另一行选择吗？如果是这样，他们是否打算进入一个 json 飞行？你希望结束 json 文件的结构是什么样的？
是的，正确的。是的，我的意思是说另一种选择的行。是的，它将放在一个 JSON 文件中。结束 JSON 文件的结构？
我正在向您发送 JSON 文件的内容。 { "ptp_status": null, "ess_status": null, "today_status": null, "house_sitting_date": "2020-12-19", "house_sitting_date_yes_no": "no", "featured_id_en": null, "featured_id_fr": null, "articles_id_en": null, "articles_id_fr": null, "twitter_url_en": null, "toggle_status": null }
我还没有把完整的内容发给你。
你在用jQuery吗？

标签： javascript php jquery html json

【解决方案1】：

由于您要标记 jQuery，您可以使用 clone 和 remove 函数来执行此操作：

例如：

HTML：

<div class="line-input">
  <input type='text' class='ipt-txt'>
  <input type='submit' class='btn-add' value="add">
  <input type='submit' class='btn-rmv' value="remove">
</div>

jQuery :

$(document).ready(function(){

    $(document).on("click",".btn-add", function(e){
    $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
  });

  $(document).on("click",".btn-rmv", function(e){
    $(this).parent(".line-input").remove();
  });

});

你可以试试这个小提琴 JSFiddle：https://jsfiddle.net/6fqc7n3z/

【讨论】：

感谢您的回答。看起来不错。我会尝试做一些类似于this