2016-04-19 1 views
1

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.Entfernen angefügte divs, wenn 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.

+1

CSS-Klasse zu dem apended divs hinzufügen und verwenden Sie es als Wähler –

Antwort

3

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>

+0

Danke für die Antwort! Das Kontrollkästchen wird zunächst nicht aktiviert. Ich kann das Kästchen ankreuzen und dann Elemente hinzufügen, aber wenn ich das Kästchen deaktiviere und es dann erneut überprüfe, sind die angehängten Elemente immer noch da. Ich habe auch keine Fehler in der Konsole. Irgendwelche Gedanken? – Lane

+0

@Lane siehe das Update –

+0

Danke Agian! Ich sehe was ich jetzt vermisst habe. Gutes Zeug! – Lane

Verwandte Themen