title: How to add and remove html element with javascript or jquery?
body: <p>I have a number of <code>CheckBox</code> elements in my html page. What I want is whenever any of these are checked, dynamically add one <code>input type='checkbox'</code> to the html page. If unchecked then remove the element which was added. No element should be repeated.</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
              &lt;title&gt;Welcome ! eDetailing :: Admin&lt;/title&gt;
             &lt;/head&gt;
          &lt;body id="bdload"&gt;
  
      &lt;form name="frm" method="post"&gt;
      &lt;input type="hidden" name="deleteId" id="deleteId" value="3"&gt;
      &lt;input type="hidden" name="nextId" id="nextId" value="1-0"&gt;
      &lt;input type="hidden" name="prvId" id="prvId" value="4-0"&gt;
  
      &lt;!----------------------------------------------media Information ------------------------------------------------------&gt;
          &lt;div id="faqtable1" class="icongroup2"&gt;
              &lt;div class="clBlock"&gt;
      &lt;!--*****************************************************************************--&gt;
                  &lt;div class="clRow"&gt;
                      &lt;div class="clLeft"&gt;
                          &lt;span id="docFname" class="col1"&gt;
                             &lt;label class="clsvlabel" for="selMediaTitle"&gt;Media Title : &lt;/label&gt;
                          &lt;/span&gt;
                          &lt;span class="col2 clWrite"&gt;
                              &lt;label class="labelshow" style="display: none; "&gt;media 2&lt;/label&gt;
                               &lt;select name="selMediaTitlen" class="clsvtext clvselectempty" id="selMediaTitle" style="display: inline-block; "&gt; 
                                  &lt;option value=""&gt;Media Title&lt;/option&gt;
                                  &lt;option value="42"&gt;Energy&lt;/option&gt; 
                                    &lt;option value="43" selected="selected"&gt;media 2&lt;/option&gt; 
                                    &lt;option value="44"&gt;media 3&lt;/option&gt; 
                                    &lt;option value="45"&gt;media 4&lt;/option&gt; 
                                    &lt;option value="46"&gt;mediapicture&lt;/option&gt; 
                                    &lt;option value="47"&gt;mediavid&lt;/option&gt; 
                                    &lt;option value="48"&gt;mediapdf&lt;/option&gt; 
                                                            &lt;/select&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="clRow"&gt;
                         &lt;div class="clRight1"&gt;
                              &lt;span id="docLname" class="col1"&gt;
                                  &lt;label class="clsvlabel" for="txtmrname"&gt;&lt;/label&gt;
                              &lt;/span&gt;
                              &lt;span class="col2 clWrite2"&gt;
                                  &lt;div class="clcheckboxlist1"&gt;
                                     &lt;div class="clckbxheader"&gt;
                                         &lt;input type="checkbox" class="clckbxheadlist1 clsvtextempty" id="ckidh1" style=""&gt;
                                         &lt;label for="ckidh1" id="chk1"&gt;Check All Doctor&lt;/label&gt;
                                         &lt;label for="ckidh1" id="unchk1" style="display:none;"&gt;UnCheck All Doctors&lt;/label&gt;
                                     &lt;/div&gt;
                                     sdsd
                                     &lt;div class="clckbxbody1" id="cklist1"&gt;
                                      &lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" checked="checked" id="28" name="checkMr[]" value="28" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#00FF7F;" class="emdoclist"&gt;Core Ai&lt;/em&gt;Zaheerdfsfghg  Sdf&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;div name="mydiv&amp;gt;&amp;lt;input type=" checkbox'class="txtshow clsvtextempty" id="28" value="28" class="checkmrdone"&gt;&lt;/div&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="6" name="checkMr[]" value="6" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#00FF7F;" class="emdoclist"&gt;Core Ai&lt;/em&gt;Prizall Anuj Bagrecha&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="7" name="checkMr[]" value="7" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#00FF7F;" class="emdoclist"&gt;Core Ai&lt;/em&gt;Javedq Rashid Ansari&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="2" name="checkMr[]" value="2" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#00FF7F;" class="emdoclist"&gt;Core Ai&lt;/em&gt;Vijay Kumar Asthana&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="34" name="checkMr[]" value="34" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#00FF7F;" class="emdoclist"&gt;Core Ai&lt;/em&gt;Manish  Malviya&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="1" name="checkMr[]" value="1" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#9ACD32;" class="emdoclist"&gt;Core Bi&lt;/em&gt;Sujoy Kumar Kale&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="4" name="checkMr[]" value="4" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#9ACD32;" class="emdoclist"&gt;Core Bi&lt;/em&gt;Avkaash K Tare&lt;/label&gt;
                                                                 &lt;/span&gt;&lt;span class="clckbxrow"&gt; &lt;input type="checkbox" class="txtshow clsvtextempty" id="5" name="checkMr[]" value="5" style=""&gt;&lt;label for="ckid1"&gt;&lt;em style="background-color:#800000;" class="emdoclist"&gt;Core Ci&lt;/em&gt;Viabhav Shishir Parkhe&lt;/label&gt;
                                                                 &lt;/span&gt;                               &lt;/div&gt;
  
                                     &lt;/div&gt;
                              &lt;/span&gt;            
                          &lt;/div&gt;
                      &lt;/div&gt;
      &lt;!--*****************************************************************************--&gt;
                      &lt;div class="clRow"&gt;
                          &lt;div class="clLeft"&gt;
                              &lt;span id="docFname" class="col1"&gt;
                                 &lt;label class="clsvlabel" for="chk_active"&gt;Active :&lt;/label&gt;
                              &lt;/span&gt;
                              &lt;span class="col2 clWrite"&gt;
                              &lt;label class="labelshow" style="display: none; "&gt;
                                  YES 
                              &lt;/label&gt;
                              &lt;input type="checkbox" name="chk_active" id="chk_active" value="0" style="width: auto; display: inline-block; " class="clsvtext clvselectempty clsvtextempty" checked="checked"&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
             &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
          $j("#btnadvsearch").bind("click", function() {
                      $j.ajax({ 
                      type:"POST",
                      url:"advanceSearch.php",
                      data: { name : $j("#advMedia").val(),type : $j("#advType").val(),activ : $j("#selActive").val(),},
                      success:function(response){ 
                      $j("#showResult").html(response);
                      }
                  }); 
          });
  
          &lt;/script&gt;
  
      &lt;div class="Zebra_DatePicker"&gt;&lt;table class="dp_header"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="dp_previous"&gt;«&lt;/td&gt;&lt;td class="dp_caption"&gt;&amp;nbsp;&lt;/td&gt;&lt;td class="dp_next"&gt;»&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;table class="dp_daypicker"&gt;&lt;/table&gt;&lt;table class="dp_monthpicker"&gt;&lt;/table&gt;&lt;table class="dp_yearpicker"&gt;&lt;/table&gt;&lt;/div&gt;&lt;div class="Zebra_DatePicker"&gt;&lt;table class="dp_header"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="dp_previous"&gt;«&lt;/td&gt;&lt;td class="dp_caption"&gt;&amp;nbsp;&lt;/td&gt;&lt;td class="dp_next"&gt;»&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;table class="dp_daypicker"&gt;&lt;/table&gt;&lt;table class="dp_monthpicker"&gt;&lt;/table&gt;&lt;table class="dp_yearpicker"&gt;&lt;/table&gt;&lt;/div&gt;&lt;/body&gt;&lt;span id="skype_highlighting_settings" display="none" autoextractnumbers="1"&gt;&lt;/span&gt;&lt;object id="skype_plugin_object" location.href="http://localhost/konnect/mediaAssgin/" location.hostname="localhost" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.click2call.chrome.5.7.0"&gt;&lt;/object&gt;&lt;/html&gt;
  </code></pre>