How to dynamically add or Remove a Div in HTML page

[Kishor Joshi]

Hi there

Here is my code
http://jsfiddle.net/vngx/4t9hfs39/1/

What I want is onClick of add a new block of same data(name of org,Role,Year...) will be add and there is a button that will remove that block..


Don't know how to acheieve this any help?

Thanks

[Bear Bibeault]

Kishor Joshi wrote:Don't know how to acheieve this any help?

Actually, it looks like you do know how to achieve it as you are using the jQuery append() and remove() methods.

So what's the actual problem?

[Kishor Joshi]

I have try append() and remove() method but I have not acheive what I want?

Are you clear from my Problem statements what I want ?or do I need to clear myself?


EDIT:
Check my updated code of Jsfiddle.net

[Bear Bibeault]

Kishor Joshi wrote:or do I need to clear myself?

You need to ShowSomeEffort. You haven't told us what the problem is except that you don't know how to "achieve it", but your code shows that you actually do know how to achieve it. So what is the real problem?

Are there errors messages on the console? Have you set breakpoints to see if your code is getting called at the right times? If so, are the variables containing the correct values? Do your jQuery selectors actually return what you expect?

These are the typed of debugging steps you need to take.

[Kishor Joshi]

Ok Let me explain what I want to acheive

This is a Simple HTML file

<div class="emp_detail">
  <br>
  <label>Name of Company/Organisation:</label><input type="text" id="emp_org" /><br>
  <label>Role:</label><input type="text" id="emp_role" /><br>
  <label>From:</label><input type="text" id="emp_from" /><label>To:</label><input type="text" id="emp_to"/><br>
  <label>Total in Years:</label><input type="text" id="emp_total" /><br>
  </div>
  <button id="add">Add</button>
 </div>

What I want is when a User has click on Button add then a Same New Block will be add at the Bottom So I am using this code

$(document).ready(function(){
    //when the Add Field button is clicked
  $("#add").click(function(){
  //Append a new row of code to the "#items" div
   $(".emp_detail").append('.emp_detail');
   $(".emp_detail").append('<button class="deletefile">Delete</button>');
  });
  
  $(".deletefile").click(function () {
		$(".deletefile").parent("div").remove();
	});
  });
  

But I am not able to acheive it
How to do this?

[Bear Bibeault]

Please answer the questions I posed in my earlier response. These will help us (and you) try to figure out where the problem lies.

[Eric Pascarello]

There is no div as a parent. Wrap the two new elements in a div and your code would work.

var div = $("<div/>");
div.append('<input type="text">')
div.append('<button class="deletefile">Delete</button>');
div.appendTo(".emp_detail");

[Kishor Joshi]

somehow after reading a lot of thread I have solved it by using prepend(),append() method of jQuery and javaScript