How to dynamically add or remove an Div element inside another div element

+1 kishor joshi · February 24, 2015
Hi
I want to dynamically add and delete a div in a HTML page what to do
this is my code that I try so far


$(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").append('Delete');
  });
 
  $(".deletefile").click(function () {
        $(".deletefile").parent("div").remove();
    });
  });
 

and this is Rest code of HTML


 
  Name of Company/Organisation:
  Role:
  From:To:
  Total in Years:
 
  Add

I want that One block is added and when I click on Remove then that block should remove but this code is not working as my need


Post a Reply

Replies

Oldest  Newest  Rating
+1 kishor joshi · March 31, 2015
Thanks
+1 Abdullah Nauman · February 24, 2015
What you could do is use JavaScript's InnerHTML functions, do override everything inside a div element. In the end, you would be left with an empty div tag.

HTML
<div id = "test">
 
  Hello World  
</div>

JavaScript

function EraseContentInsideDiv() {
    document.getElementById("test").innerHTML = " "
}



If you want to add a div tag you could do
function AddDiv() {
    document.getElementById(this.body).innerHTML = ' <div id = "test"> </div> '
}


Hope This Helped :) 
If you have any further questions feel free to ask.
  • 1

HTML / CSS / Web Design

107,121 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators