title: How to remove appended div on jquery
body: <p>Hello I want to remove the cloned html when I click this, what is the best way? how to detect that it's what I've clicked on <code>X</code></p>
  
  <p><a href="https://i.stack.imgur.com/5wg7N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wg7N.png" alt="enter image description here"></a></p>
  
  <p>and this is the HTML</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;Fields&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="field"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading clearfix"&gt;
                              &lt;a id="close" class="pull-right" href="#"&gt;
                                &lt;i class="fa fa-times"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;select class="form-control" name="custom_form[type]" required&gt;
                                  &lt;option value=""&gt;Type&lt;/option&gt;
                                  &lt;option&gt;text&lt;/option&gt;
                                  &lt;option&gt;textarea&lt;/option&gt;
                                  &lt;option&gt;radio&lt;/option&gt;
                                  &lt;option&gt;checkbox&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;input class="form-control" type="text" name="customform[label]" placeholder="Label" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;a href="#" id="add_attribute" class="btn btn-default"&gt;+ Add attribute&lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is what I've used to clone the fields when I click the button <code>+ Add Attribute</code></p>
  
  <pre><code>&lt;div class="clone-field hide"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading clearfix"&gt;
                  &lt;a id="close" class="pull-right" href="#"&gt;
                    &lt;i class="fa fa-times"&gt;&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;select class="form-control" name="custom_form[type]" required&gt;
                      &lt;option value=""&gt;Type&lt;/option&gt;
                      &lt;option&gt;text&lt;/option&gt;
                      &lt;option&gt;textarea&lt;/option&gt;
                      &lt;option&gt;radio&lt;/option&gt;
                      &lt;option&gt;checkbox&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input class="form-control" type="text" name="customform[question]" placeholder="Question" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $(".container").on("click", "#add_attribute", function(e){
          e.stopPropagation();
          e.preventDefault();
  
          alert("ok");
          var append_att = $(".clone-field").html();
  
          $(".field").append(append_att);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT1</strong>
  the close is already done, so I added one more since it's still same concept,</p>
  
  <p>How to add <code>&lt;input type="text" name="customform[option]" placeholder="Ex. Male,Female" /&gt;</code> when I select <code>Type</code> = <code>radio,select,checkbox</code> and remove if it's not, then put it under on the <code>Label input</code>?</p>
  
  <p><a href="https://i.stack.imgur.com/0CkW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0CkW8.png" alt="enter image description here"></a> </p>
  
  <p>currently I have</p>
  
  <pre><code>$(".container").on("click", "#add_attribute", function(e){
      e.stopPropagation();
      e.preventDefault();
  
      var append_att = $(".clone-field").html();
  
      $(".fields").append(append_att);
  }).on('click', '.remove', function() {
      $(this).closest('.field').remove();
  }).on('change', '.field-type', function(){
      var input_option = '&lt;input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /&gt; ';
      var valueSelected = this.value;
  
      if(valueSelected == 'radio' || valueSelected == 'select')
          //append
      else
          //remove
  });
  </code></pre>
  
  <p><strong>EDIT2</strong>
  I've added this hidden input text
  <a href="https://i.stack.imgur.com/0CkW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0CkW8.png" alt="enter image description here"></a> </p>
  
  <p>how to find closest into removeClass('hide')/addClass('hide') of my  base on <code>Type</code> = <code>radio,select</code></p>
  
  <p><strong>EDIT3 - MY TOTAL ANSWER</strong></p>
  
  <pre><code>$(".container").on("click", "#add_attribute", function(e){
      e.stopPropagation();
      e.preventDefault();
  
      var append_att = $(".clone-field").html();
  
      $(".fields").append(append_att);
  }).on('click', '.remove', function() {
      $(this).closest('.field').remove();
  }).on('change', '.field-type', function(){
      var inputType = this.value;
      var panel = $(this).closest('.panel-body');
  
      var inputs = panel.find('input');
      inputs.last().val("");
  
      if(inputType=='radio' || inputType=='select') {
          inputs.last().removeClass('hide');
      } else {
          inputs.last().addClass('hide');
      }
  });
  </code></pre>