wie entfernen Sie das Textfeld ein bye ein in Schaltfläche klicken

Question

HTML

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


    <img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" /> 


    <div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" > 

    <img class="mynasicondiv" src="vectorimages/mynas.svg" />    

JS

$(function() { 
    $('.plusicon').on('click', function() { 

     var textBox = '<input type="text" class="textbox"/>'; 
     var a = $(this).attr("id") 

     $('#'+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 
      }) 

    }); 
}); 

Ich habe zwei Knöpfe, plusicon Taste und mynesicon Taste. Ich möchte klicken Sie auf die plusicon Schaltfläche fügen Sie die Textbox und das Bild, klicken Sie auch auf die mynessicon Schaltfläche sollte die Textfelder und Bilder entfernen. Mein Problem ist, dass das Klicken auf das mynesicon entsprechende Textfeld nur entfernt.

Answer 1

Verwenden Sie .each, um alle Elemente zu entfernen und um die Funktion .remove auf dem Zielelement zu entfernen.

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

 
     $('#' + a + "box").append(img); 
 
     
 
    
 
    }); 
 
     $('.mynasicondiv').on("click", function() { 
 
      $('#' + a + "box").each(function(index, v){ 
 
       $(v).remove(); 
 
      }); 
 
     }); 
 
});

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

 
<div><img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" /></div> 
 
      
 

 

 
       
 
<div><img class="mynasicondiv" src="vectorimages/mynas.svg" /> </div> 
 

 
<div id="plusicondivbox"class="insidediv " ></div> 
 
</div>