How to add/delete a row in Javascript?

Question

I am working on html/php code as shown below.

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

The above html/php code display the following as shown in the screenshot:

On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:

$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'));
}

Problem Statement:

I am wondering what JS code I need to add so that it add/delete rows.

On hitting + sign, it should add one row. On hitting - sign, it should delete a row.

When I say add a row, it means add another select of rows.

When you say "add a row", do you mean another row of selects? And if so, is the intention for all of them to go into one json flie? What do you want the structure of the end json file to look like? — alexania
– alexania, Commented Dec 12, 2019 at 20:19
Yes, correct. Yes I meant to say another select of rows. Yes, it will go in one JSON file. Structure of end JSON file ? — flash
– flash, Commented Dec 12, 2019 at 20:21
I am sending you the content of JSON file. { "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 } — flash
– flash, Commented Dec 12, 2019 at 20:24

Danny Bastian · Accepted Answer · 2019-12-12 22:23:40Z

-1

Since you're tagging jQuery, you can do this with clone and remove function :

E.g :

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();
  });

});

You can try this fiddle JSFiddle : https://jsfiddle.net/6fqc7n3z/

edited Dec 12, 2019 at 22:23

answered Dec 12, 2019 at 21:49

Danny Bastian

858 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

flash Over a year ago

Thanks for the answer. It looks great. I will try to make something similar to this

Collectives™ on Stack Overflow

How to add/delete a row in Javascript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related