Click at button > Add div > In div button to remove div

Question

I have a page where it needs to be possible to add and then remove added divs. The divs cant just hide becuse its should contains settings so when delete the div/divs = the settings in this div/divs also gets deleted. The divs that gets loaded in/added are: #settings1 #settings2 #setting3 .

In the page there is a button that should add the divs (example: click 3 times to add #settings1 #settings2 #settings3 :

<a href="" class="design_button">Click here to add more divs</a>

Then there is a div that should receive the contents ( #settings1 #settings2 #settings3 ) when its getting loaded in:

<div id="this_div_contains_settings">Here the #settings gets loaded in, then deleted if its not needed anymore</div>

Then in another page (content.html) there is the div #settings containing settings:

<div id="settings1">Some forms etc.</div>
<div id="settings2">Some forms etc.</div>
<div id="settings3">Some forms etc.</div>

In those divs there is a button that will remove the specific div after its been added.

<a href="" class="design_button">Remove this div</a>

---

Basically: Click the "Click here to add more divs" button to add multiple #settings divs into the div #this_div_contains_divs . Click on the button "Remove this div" in the #settings div to remove the current div.

I made a picture to describe how I mean: http://imgur.com/DVPSR

I need some help with:

Load in the content #settings1 #settings2 #settings3 to #this_div_contains_settings by clicking on a button then delete the current div by clicking on a button in that div.

I hope somebody can help me with this. Thanks.

Answer 1

Using jQuery for your index.html page would look like something like this:

HTML:

<a href="#" class="design_button add">Click here to add more divs</a>
<div id="this_div_contains_settings"></div>

jQuery (you need to load jQuery version higher than 1.7.2 for on() to work):

$(function(){
   var number = 1;
   $('a.add').click(function(e){
      e.preventDefault();
      $('#this_div_contains_settings').append('<div id="settings'+number+'">Some forms etc.<a href="#" class="design_button">Remove this div</a></div>');
      number++;
   });
   $('#this_div_contains_settings').on('click','a.design_button', function(e){
      e.preventDefault();
      $(this).parent().remove();
   });
});

Working fiddle here: http://jsfiddle.net/WdcTK/

Then adding data to cookies remain...