, wie man Text boxdiv auf Klick-Taste

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>

ich habe zwei Symbole ein plusbutton anthere ist mynasbutton i hinzugefügt werden soll, das Bild und Text Onclick plusbutton Symbol zu entfernen, und wenn ich die entsprechenden das einzige entfernen klicken mynasbutton Textbox und Bild.

$(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>

aber mein Problem ist das mynasbutton ganze Textfeld entfernt werden, klicken Sie auf.

Answer 1

Versuchen Sie diesen 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

Answer 2

Der Grund, warum alle von ihnen ist verschwunden, weil Sie empty die plusicondivbox, die alle von ihnen enthalten ... Das ist mein Ansatz für Ihr Problem ist: 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(); 
    }); 
}); 

Sie können wieder die <div>-<img> Änderung, die die jQuery auswirken wird, weil es mit der Klasse nicht das Element geht. Sie können auch das Textfeld und das Löschbild (.mynasicondiv) gleichzeitig einfügen. Um den Löschvorgang zu vereinfachen, indem Sie sie mit einem div umschließen, ist es einfacher, dieses div als übergeordnetes Element des Elements auszuwählen, das den Klick auslöst und löschen Sie einfach das Element, das das spezifische Textfeld enthält und mynasicondiv ... Sie sollten Ihre jquery in die $(document).ready(function(){ *** }); wickeln, so dass Sie ausgeführt, wenn das DOM geladen und bereit ist, geben Sie auch einen Ausgangspunkt ... Ich schlage vor Finden Sie eine Möglichkeit, den Textfeldern eine eindeutige id zu geben, damit Sie letztere ohne eine komplexe Suche durch das DOM adressieren können.