Adding a remove button on a JavaScript object array that is looped

Question

I have a JavaScript object that has this structure:

var spouse = {
  s_name: { value: spouse_name, label: "Name" },
  s_nric: { value: spouse_nric_passport, label: "NRIC/Passport" },
  s_dob: { value: spouse_date_of_birth, label: "Date of Birth" },
  s_occupation: { value: spouse_occupation, label: "Occupation" },
  s_weight: { value: spouse_weight, label: "Weight" },
  s_height: { value: spouse_height, label: "Height" }
};

I am currently iterating through it like this:

$.each(spouses, function(key, value) {
  console.log(value);
  $.each(value, function(int_key, int_value) {
    console.log(int_key);
    console.log(int_value.value);
    console.log(int_value.label);
    $("#spouse_data").append(
      "<div class='col-sm-4'><label>" +
        int_value.label +
        "</label><input type='text' readonly class='form-control' value=" +
        int_value.value +
        "></div>"
    );
  });
});

What this does is place the elements into dynamically generated html elements. However, I am unsure of how I can place the remove function. At the moment if I place it within the loop, each row of data within a structure will contain a remove function instead of a general remove function.

How can I change this so that I can add a general remove function? Or is there a better way to print out this structure onto the screen?

So you want to have a single remove button, is that what you want? — Ajay Gupta
– Ajay Gupta, Commented Jun 2, 2018 at 13:36
Yeah. And if you have a better way of displaying a javascript object in html that would be great also — JianYA
– JianYA, Commented Jun 2, 2018 at 13:39
What do you mean by a remove function instead of a general remove function?? — Mamun
– Mamun, Commented Jun 2, 2018 at 13:42
Add a button that calls the function remove. While rendering the list, add a checkbox and set the current index as the its ID. This checkbox, whenever checked, will call the function markForRemoval (markForRemoval basically adds the ID to an array, which is later used by remove method.) Hope it makes sense! — Ajay Gupta
– Ajay Gupta, Commented Jun 2, 2018 at 13:45
Sorry but if I add a checkbox about 6 checkboxes will be added due to my loop. How do I prevent that? — JianYA
– JianYA, Commented Jun 2, 2018 at 13:49

Mamun · Accepted Answer · 2018-06-03 13:08:19Z

1

May be you can try the following way:

var spousesArray = [{
  s_name:{value:"spouse_name",label:"Name"},
  s_nric:{value:"spouse_nric_passport",label:"NRIC/Passport"},
  s_dob:{value:"spouse_date_of_birth",label:"Date of Birth"},
  s_occupation:{value:"spouse_occupation",label:"Occupation"},
  s_weight:{value:"spouse_weight",label:"Weight"},
  s_height:{value:"spouse_height",label:"Height"}
},
{
  s_name:{value:"spouse_name",label:"Name2"},
  s_nric:{value:"spouse_nric_passport",label:"NRIC/Passport2"},
  s_dob:{value:"spouse_date_of_birth",label:"Date of Birth2"},
  s_occupation:{value:"spouse_occupation",label:"Occupation2"},
  s_weight:{value:"spouse_weight",label:"Weight2"},
  s_height:{value:"spouse_height",label:"Height2"}
}];

$.each(spousesArray, function(i, spouses){
  var classN = 'parent-' + i;
  var removeBtn = "<button onclick=remove('" +classN+ "')>Remove</button>";
  $("#spouse_data").append("<div class='" +classN+ "'><div>")
  $.each(spouses,function(key,value){
    $("."+classN).append("<div class='col-sm-4'><label>"+value.label+"</label><input type='text' readonly class='form-control' value="+value.value+"></div>");  
  });
  $("."+classN).append(removeBtn);
});

function remove(el){
  $('.' + el).remove();
  var position = el.split('-')[1];
  spousesArray.splice(position,1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spouse_data"></div>

edited Jun 3, 2018 at 13:08

answered Jun 2, 2018 at 13:57

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

10 Comments

JianYA Over a year ago

Thats great. But I want to remove the entire structure. This structure will be added to an array

Mamun Over a year ago

@JianYA, I understand you want to remove everything generated by a single remove button.....but can not understand This structure will be added to an array........

JianYA Over a year ago

spouses is an object that will be added to an array. So an array of spouses. I cannot remove only one item within the spouse object. Hope that clarifies it.

Mamun Over a year ago

@JianYA, you might see the the updated answer....if it helps you solve your problem.....thanks

JianYA Over a year ago

does this remove it from the array as well?

|

Collectives™ on Stack Overflow

Adding a remove button on a JavaScript object array that is looped

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related