Add remove HTML inside div using JavaScript

Question

I want to be able to add multiple rows to a div and also removing them  I have a     button at the top of the page which is for adding content  Then to the right of every row there is a  -  button that s for removing that very row  I just can t figure out the javascript code in this example   This is my basic HTML structure    lt input type  button  value     onclick  addRow    gt    lt div id  content  gt    lt  div gt    This is what I want to add inside the content div    lt input type  text  name  name  value      gt   lt input type  text  name  value  value      gt   lt label gt  lt input type  checkbox  name  check  value  1    gt Checked  lt  label gt   lt input type  button  value  -  onclick  removeRow    gt

User · Answer

Add HTML inside div using JavaScript Syntax  element innerHTML     quot additional HTML code quot   or element innerHTML   element innerHTML    quot additional HTML code quot   Remove HTML inside div using JavaScript elementChild remove

User · Answer

You can use this function to add an child to a DOM element   function addElement parentId  elementTag  elementId  html            Adds an element to the document       var p   document getElementById parentId       var newElement   document createElement elementTag       newElement setAttribute  id   elementId       newElement innerHTML   html      p appendChild newElement        function removeElement elementId              Removes an element from the document     var element   document getElementById elementId       element parentNode removeChild element

User · Answer

You can do something like this   function addRow       const div   document createElement  div       div className    row      div innerHTML          lt input type  text  name  name  value      gt       lt input type  text  name  value  value      gt       lt label gt          lt input type  checkbox  name  check  value  1    gt  Checked        lt  label gt       lt input type  button  value  -  onclick  removeRow this     gt          document getElementById  content   appendChild div      function removeRow input      document getElementById  content   removeChild input parentNode

User · Answer

To my most biggest surprise I present to you a DOM method I ve never used before googeling this question and finding ancient insertAdjacentHTML on MDN  see CanIUse insertAdjacentHTML for a pretty green compatibility table    So using it you would write   x000D   x000D  function addRow      x000D    document querySelector   content   insertAdjacentHTML  x000D       afterbegin   x000D        lt div class  row  gt  x000D         lt input type  text  name  name  value      gt  x000D         lt input type  text  name  value  value      gt  x000D         lt label gt  lt input type  checkbox  name  check  value  1    gt Checked  lt  label gt  x000D         lt input type  button  value  -  onclick  removeRow this   gt  x000D       lt  div gt         x000D      x000D    x000D   x000D  function removeRow  input    x000D    input parentNode remove   x000D    x000D   lt input type  button  value     onclick  addRow    gt  x000D   x000D   lt div id  content  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Dynamical Add Remove Text Box lt  title gt       lt script language  javascript  gt           localStorage i   Number 1            function myevent action                        var i   Number localStorage i               var div   document createElement  div                 if action id     add                                 localStorage i   Number localStorage i    Number 1                   var id   i                  div id   id                  div innerHTML    TextBox   id     lt input type  text  name  tbox   id     gt        lt input type  button  id   id   onclick  myevent this   value  Delete    gt                     document getElementById  AddDel   appendChild div                             else                               var element   document getElementById action id                   element parentNode removeChild element                                lt  script gt   lt  head gt   lt body gt       lt fieldset gt       lt legend gt Dynamical Add   Remove Text Box lt  legend gt       lt form gt           lt div id  AddDel  gt              Default TextBox               lt input type  text  name  default tb  gt               lt input type  button  id  add  onclick  myevent this   value  Add    gt           lt  div gt               lt input type  button  type  submit  value  Submit Data    gt       lt  form gt       lt  fieldset gt   lt  body gt   lt  html gt

User · Answer

To remove node you can try this solution it helped me   var rslt    nodee document getElementById id   parentNode removeChild nodee

User · Answer

please try following to generate     function addRow                 var e1   document createElement  input            e1 type    text           e1 name    name1            var cont   document getElementById  content           cont appendChild e1

User · Answer

make a class for that button lets say      lt input type  button  value     class  b1  onclick  addRow    gt     your js should look like this      document  ready function          b1   click function             div   append   lt input type  text   etc

User · Answer

Another solution is to use getDocumentById and insertAdjacentHTML   Code   function addRow       const  div   document getElementById  content      div insertAdjacentHTML  afterbegin    PUT HTML HERE         Check here  for more details  Element insertAdjacentHTML

[javascript] Add/remove HTML inside div using JavaScript

Examples related to javascript

Examples related to html

Examples related to innerhtml