Dynamisch erstellt select2 nicht entfernt auf Knopfdruck

Question

Ich muss das select2 dynamisch generieren und entfernen.

Jetzt bin ich erfolgreich in der Lage, select2 bei einem Klick auf die Schaltfläche hinzuzufügen, aber ich muss auch die dynamisch erstellte select2 entfernen, wenn der Benutzer auf die Schaltfläche "Entfernen" klickt.

Ab sofort wird nur die dynamisch generierte Textbox entfernt, die neben der select2 ist, auf die ich mit ihrer ID zugreife.

Ich habe versucht, Zugriff auf die Klasse sowie die ID mit der 'Select', die ich in select2 umgewandelt hatte, aber immer noch die select2 wurden nicht entfernt.

Es folgt das Skript:

var container = $(document.createElement('div')).css({ 
     padding: '5px', margin: '20px', width: '400px', border: '1px solid', 
     borderTopColor: '#999', float: 'left', borderBottomColor: '#999', 
     borderLeftColor: '#999', borderRightColor: '#999' 
    }); 

var iCnt = 0; 
function add() 
{ 
     if (iCnt <= 19) { 

      iCnt = iCnt + 1; 

    $(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>")); 

    //Add Property Selector 

    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
    $(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>")); 
    //$('.selinput2' + iCnt).select2({width : '20%'}); 
    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
      // ADD TEXTBOX. 
      $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' + 
         'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>'); 


      // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED. 
      if (iCnt == 1) { 

       var divSubmit = $(document.createElement('div')); 
       $(divSubmit).append('<input type=button class="bt"' + 
        'onclick="GetTextValue()"' + 
         'id=btSubmit value=Submit />'); 

      } 

      // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER. 
      $('#main').after(container, divSubmit); 

      // Initialize select2 
         $('select').select2({width : '20%'}); 
     } 

     // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
     // (20 IS THE LIMIT WE HAVE SET) 
     else { 
      $(container).append('<label>Reached the limit</label>'); 
      $('#btAdd').attr('class', 'bt-disable'); 
      $('#btAdd').attr('disabled', 'disabled'); 
     } 
    } 
function remove() { 
     if (iCnt != 0) { 

    console.log($(container).closest()); 

    $('#tbtext' + iCnt).remove(); 
    $('#add' + iCnt).remove(); 
    //$('select').select2({width : '20%'}).remove(); 
    $('#tb2' + iCnt).remove(); 


    iCnt = iCnt - 1; } 

     if (iCnt == 0) { 
      $(container) 
       .empty() 
       .remove(); 

      $('#btSubmit').remove(); 
      $('#btAdd') 
       .removeAttr('disabled') 
       .attr('class', 'bt'); 
     } 
    } 

// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED. 
var divValue, values = ''; 

Nach der Link zum jsFiddle:

https://jsfiddle.net/zjafvr3u/4/

Bitte vorschlagen.

Answer 1

siehe hier: JSFiddle

was ich tat, war, alle Elemente innerhalb eines div zu erstellen, die es einfacher machen, die ganze Reihe auf einmal zu entfernen.

$(container).append('<div class="row"></div>'); 
    $(".row:last").append("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>"); 

    //Add Property Selector 

    $(".row:last").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); 
    $(".row:last").append("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"); 
    //$('.selinput2' + iCnt).select2({width : '20%'}); 
    $(".row:last").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); 
    // ADD TEXTBOX. 
    $(".row:last").append('<input type=text class="input" id=tbtext' + iCnt + ' ' + 
     'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>'); 

und beim Entfernen, verwenden Sie einfach die folgende

$('.row:last').remove(); 

Answer 2

Fügen Sie eine weitere Klasse In Css Select2row für die Verwendung Div. Ihre select2 Dropdown in diesem div assign id this div.

sehen Live-DemoHere

aktualisieren Css

.Select2row 
{ 
    display:inline; 
} 

Aktualisiere dein Script

var container = $(document.createElement('div')).css({ 
      padding: '5px', margin: '20px', width: '400px', border: '1px solid', 
      borderTopColor: '#999', float: 'left', borderBottomColor: '#999', 
      borderLeftColor: '#999', borderRightColor: '#999' 
     }); 

var iCnt = 0; 
function add() 
{ 
      if (iCnt <= 19) { 

       iCnt = iCnt + 1; 

     $(container).append($("<div class='Select2row' id=tb" + iCnt + " ><select class ='selinput'" + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'></div>")); 

     //Add Property Selector 

     $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
     $(container).append($(" <div class='Select2row' id=tb2" + iCnt + " ><select class ='selinput2" + iCnt + "'' " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>")); 
     //$('.selinput2' + iCnt).select2({width : '20%'}); 
     $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");  
       // ADD TEXTBOX. 
       $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' + 
          'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br></div>'); 


       // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED. 
       if (iCnt == 1) { 

        var divSubmit = $(document.createElement('div')); 
        $(divSubmit).append('<input type=button class="bt"' + 
         'onclick="GetTextValue()"' + 
          'id=btSubmit value=Submit />'); 

       } 

       // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER. 
       $('#main').after(container, divSubmit); 

       // Initialize select2 
          $('select').select2({width : '20%'}); 
      } 

      // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. 
      // (20 IS THE LIMIT WE HAVE SET) 
      else { 
       $(container).append('<label>Reached the limit</label>'); 
       $('#btAdd').attr('class', 'bt-disable'); 
       $('#btAdd').attr('disabled', 'disabled'); 
      } 
     } 
function remove() { 
      if (iCnt != 0) { 

     console.log($(container).closest()); 
     $('#tbtext' + iCnt).remove(); 
     $('#tb2' + iCnt).remove(); 
    $('#tb' + iCnt).remove(); 


     iCnt = iCnt - 1; } 

      if (iCnt == 0) { 
       $(container) 
        .empty() 
        .remove(); 

       $('#btSubmit').remove(); 
       $('#btAdd') 
        .removeAttr('disabled') 
        .attr('class', 'bt'); 
      } 
     } 

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED. 
    var divValue, values = '';