v2.5.2
Giriş yap

Ekle butonuna tıklayınca yeni input alanı ekleme silme

resat
458 defa görüntülendi

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>
munzevi
872 gün önce

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.