Ekle butonuna tıklayınca yeni input alanı ekleme silme
Merhaba arkadaşlar, yapmak istediğim ekle butonuna tıkladığımda alt kısımda 1 adet daha Ad Soyad ve E-Mail Adresi alanının oluşması. Çıkar dediğimde ise eklene alanın silinmesini istiyorum. Konuyu ne diye arattırabilirim yada yardımcı olabilecek ardadaşlar varmıdır aramızda teşekkürler.
Düzeltme: Ekle diyince yeni elemanları ekleyebildim. Fakat çıkar dediğimde çıkarma işleminde takıldım
<form>
<div id="veriler">
<div class="row mb-3">
<div class="col-md-5">
<input type="text" class="form-control" name="isim[]" placeholder="Adınız Soyadınız">
</div>
<div class="col-md-5">
<input type="text" class="form-control" name="telefon[]" placeholder="Telefon Numaranız">
</div>
<div class="col-md-2">
<button id="cikar" class="btn btn-warning w-100">Çıkar</button>
</div>
</div>
</div>
<button type="submit" class="btn btn-success w-100 mb-3">Kaydet</button>
</form>
<button id="ekle" class="btn btn-success w-100 mb-3">Ekle</button>
</div>
<script src="https://www.yenyweb.com/istakip/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ekle').click(function(){
$('#veriler').append($('<div class="row mb-3"><div class="col-md-5"><input type="text" class="form-control" name="isim[]" placeholder="Adınız Soyadınız"></div><div class="col-md-5"><input type="text" class="form-control" name="telefon[]" placeholder="Telefon Numaranız"></div><div class="col-md-2"><button id="cikar" class="btn btn-warning w-100">Çıkar</button></div></div>'));
});
});
</script>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
jquery'nin resmi sitesinde yer alan dökümanlar içerisinde "manipulation" adında bir sayfa var, orada yaklaşık 10 kadar yöntem mevcut. append gibi, zaten o da bu gruba dahil. kullanımlarıda append kadar kolay, bir göz atıver. bir tanede örnek göstereyim;
$('.cikartma-butonu').on('click', function (){
$('.cikartilcak-eleman').remove();
});
.cikartma-butonu class'lı öğeye tıklandığında, .cikartilcak-eleman class'lı html öğesini kaldırmış oldun. buradaki remove fonksiyonu jquery'e ait değildir, düz javascript yöntemidir.
