Entfernen angefügte divs, wenn Kontrollkästchen deaktiviert ist

Question

Ich habe einen Teil eines Formulars, das neue Zeilen hinzufügen kann, wenn auf eine Schaltfläche geklickt wird. Ich habe dies mit der Methode jQuery append erreicht. Ich habe auch Code hinzugefügt, um ein einzelnes angehängtes Element zu entfernen, aber ich muss auch alle angehängten Elemente entfernen können, wenn ein bestimmtes Kontrollkästchen deaktiviert ist.

unten ist der Code, den ich für die Schaltfläche und Eingabefelder haben:

$(function() { 
var max_fields  = 10; //maximum input boxes allowed 
var $wrapper  = $(".input_fields_wrap"); //Fields wrapper 
var $add_button = $(".add_field_button"); //Add button ID 
var prefix1  = 'outlet[]'; 
var prefix2  = 'url[]'; 
$add_button.click(function(e) { //on add input button click 
    var count = $wrapper.find('.col-md-12').length; 
    e.preventDefault(); 
    if (count < max_fields) { //max input box allowed 
     $wrapper.append('<div class="col-md-12">\ 
          <div class="row">\ 
          <div class="form-group">\ 
           <div class="col-md-6">\ 
           <input type="text" class="form-control" placeholder="Outlet" name="'+prefix1+'_'+count+'" id="'+prefix1+'_'+count+'" value=""/>\ 
           </div>\ 
           <div class="col-md-6">\ 
           <div class="input-group">\ 
           <input type="text" class="form-control" placeholder="URL" name="'+prefix2+'_'+count+'" id="'+prefix2+'_'+count+'" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\ 
           </div>\ 
           </div>\ 
          </div>\ 
          </div>\ 
          <p>&nbsp;</p>'); //add input box 
    } else { 
     alert('Maximum # of outlets is 10') 
    } 
}); 
$wrapper.on("click",".glyphicon", function(e) { //user click on remove text 
    $(this).parents('.col-md-12').remove(); 
    $wrapper.find('.col-md-12').each(function(i) { 
     $(this).find('input[type="text"]:first').attr({"id": prefix1+'_'+i, "name":prefix1+'_'+i}); 
     $(this).find('input[type="text"]:last').attr({"id": prefix2+'_'+i, "name":prefix2+'_'+i}); 
    }); 
    }); 
}); 

Ich habe eine Funktion, um die div ein- und ausblenden, dass dieser Code in angezeigt wird, aber wenn nach auf die Schaltfläche Hinzufügen klicken, ein Benutzer hebt das Kontrollkästchen auf, das Div ist ausgeblendet, aber die hinzugefügten Zeilen werden nur entfernt, wenn ich die Seite aktualisiere.

function socmedCh() { 
    if ($('#moc3').is(":checked")) { 
    $("#soc").show(); 
    } else { 
    $("#soc").hide(); 
    } 
} 

Es ist in der anderen, die ich alle angehängten Elemente entfernen müssen. Ich habe viele Varianten der Methode remove ausprobiert, aber ich habe es noch nicht vollständig geschafft, jedes Bit des gesamten HTML-Segments, das zuvor angehängt wurde, vollständig zu entfernen.

Jede Einsicht wird sehr geschätzt.

Answer 1

Fügen Sie eine Klasse zu den neu hinzugefügten Eingangsgruppen dann in den anderen Handler wählen diese Elemente entfernen sind ihnen

$(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var $wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var $add_button = $(".add_field_button"); //Add button ID 
 
    var prefix1 = 'outlet[]'; 
 
    var prefix2 = 'url[]'; 
 
    $add_button.click(function(e) { //on add input button click 
 
    var count = $wrapper.find('.col-md-12').length; 
 
    e.preventDefault(); 
 
    if (count < max_fields) { //max input box allowed 
 
     $wrapper.append('<div class="col-md-12 new-group">\ 
 
          <div class="row">\ 
 
          <div class="form-group">\ 
 
           <div class="col-md-6">\ 
 
           <input type="text" class="form-control" placeholder="Outlet" name="' + prefix1 + '_' + count + '" id="' + prefix1 + '_' + count + '" value=""/>\ 
 
           </div>\ 
 
           <div class="col-md-6">\ 
 
           <div class="input-group">\ 
 
           <input type="text" class="form-control" placeholder="URL" name="' + prefix2 + '_' + count + '" id="' + prefix2 + '_' + count + '" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\ 
 
           </div>\ 
 
           </div>\ 
 
          </div>\ 
 
          </div>\ 
 
          <p>&nbsp;</p>'); //add input box 
 
    } else { 
 
     alert('Maximum # of outlets is 10') 
 
    } 
 
    }); 
 
    $wrapper.on("click", ".glyphicon", function(e) { //user click on remove text 
 
    $(this).closest('.col-md-12').remove(); 
 
    $wrapper.find('.col-md-12').each(function(i) { 
 
     $(this).find('input[type="text"]:first').attr({ 
 
     "id": prefix1 + '_' + i, 
 
     "name": prefix1 + '_' + i 
 
     }); 
 
     $(this).find('input[type="text"]:last').attr({ 
 
     "id": prefix2 + '_' + i, 
 
     "name": prefix2 + '_' + i 
 
     }); 
 
    }); 
 
    }); 
 
}); 
 

 
$('#moc3').change(socmedCh); 
 

 
function socmedCh() { 
 
    if ($('#moc3').is(":checked")) { 
 
    $("#soc").show(); 
 
    } else { 
 
    $("#soc").hide(); 
 
    $('.input_fields_wrap .new-group').remove(); 
 
    } 
 
}

#soc { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="moc3" type="checkbox" /> 
 
<div id="soc"> 
 
    <button class="add_field_button">Add</button> 
 
    <div class="input_fields_wrap"></div> 
 
</div>