how to remove text boxdiv on click button

Question

 <img id="plusicondiv" class="rose" src="images/pluseicon.svg" />
         

            <div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" >
             
  
              
                <img class="mynasicondiv" src="images/mynas.svg" />
            </div>  

i have two icons one is plusbutton anther is mynasbutton i want add the image and textbox onclick plusbutton icon and when i click mynasbutton remove the only the corresponding textbox and image.

$(function () {
    $('.rose').on('click', function () {
        
        var textBox = '<input type="text" class="textbox"/>';
        var a = $(this).attr("id");alert(a)
        
        $('#'+a+"box").append(textBox);
        
        
        var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';

        $('#' + a + "box").append(img);

        
  
        $(function() {
            $(document).on("click",".mynasicondiv",function () {
                $(this).parent('#' + a + "box").empty();
                return
                $(this).find(".rose").input();
                $(this).addClass("texbox");
            })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

but my problem is click the mynasbutton all the text box are removed.

Answer 1

The reason why all of them disappear is because you empty the plusicondivbox that contain all of them... This is my approach to your problem: fiddle

HTML:

<div id="plusicondiv" class="rose" src="images/pluseicon.svg" >+</div>
<div id="plusicondivbox"class="insidediv " style="margin-top:0px;" ></div>  

jQuery:

$(document).ready(function () {
    $('.rose').on('click', function () {
        var textBox = '<div>'+
                      '<input type="text" class="textbox"/>'+
                      '<div class="mynasicondiv" src="vectorimages/mynas.svg">-</div>'+
                      '</div>';
        var a = $(this).attr("id");alert(a);        
        $('#'+a+"box").append(textBox);
    });

    $(document).on("click",".mynasicondiv",function () {
        var a = $(this).attr("id");alert(a);
        $(this).parent().remove();
    });
});

You can change again the <div> to <img> that won't affect the jQuery because it goes with the class not the element. You can also insert the text box, and the delete image (.mynasicondiv) all at once, and to simplify the deleting task by wrap them with a div, it's easier to target that div as the parent of the element that trigger the click and just delete the element that contains the specific text box and mynasicondiv... You should wrap your jquery in the $(document).ready(function(){ *** });, so you executed when the DOM is loaded and ready, also give you a start point... I suggest you find a way to give the text boxes a unique id so you can address them latter, without a complex search through the DOM.

Answer 2

Try this code

<script type="text/javascript" src="jquery.min.js"></script>
<section id="main-content">
  <section class="wrapper">
      <!-- BASIC FORM ELELEMNTS -->
            <div class="row mt">
              <div class="col-lg-12">
                  <div class="form-panel">
                      <h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>

                      <form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
                          <input type="hidden" class="form-control" name="user_id" >


                          <div class="form-group">
                              <label class="col-sm-2 col-sm-2 control-label">Picture 1</label>                              
                              <div class="col-sm-10 upload_div">
                                  <div style="float:left;width:30%;">
                                    <input type="file" name="userfile[]">
                                  </div>                                 
                              </div>
                          </div>

                          <div class="other_files">                                
                          </div>  


                          <div class="form-group">                              
                              <div class="col-sm-10">                                  
                                  <a href="javascript:void(0);" class="btn btn-primary add_btn" id="add_btn" style="width:20%;margin-right:col-sm-100px;">Add</a>
                                  <button class="btn btn-primary" type="submit">Upload</button>
                              </div>
                          </div>

                      </form>
                  </div>
              </div><!-- col-lg-12-->       
            </div><!-- /row --> 
  </section>
</section>
<script type="text/javascript">


$(document).ready(function(){
    var max_upload=5;
    var addbutton=$('.add_btn');
    var wrapper=$('.other_files');

    var x=1;

    $(addbutton).click(function(){
        if(x < max_upload)
        {          
          x++;
          var new_html='<div class="form-group">';
          new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';                              
          new_html+='<div class="col-sm-10 upload_div">';
          new_html+='<div style="float:left;width:30%;">';
          new_html+='<input type="file" name="userfile[]">';
          new_html+='</div>';
          new_html+='<div style="width:70%;">'; 
          new_html+='<a href="javascript:void(0);" class="btn btn-danger delete_class" id="delete_id" style="width:20%;">Delete</a>'; 
          new_html+='</div>';
          new_html+='</div>';
          new_html+='</div>';

          wrapper.append(new_html); 
        }
    });

    $(wrapper).on('click','.delete_class',function(e){
        e.preventDefault();
        $(this).parent().parent().parent().remove();
        x--;
    });

  });
</script>

Working Fiddle