Jquery ile input nesne silme

bilinmez1i 1310 gün önce

1,384 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Jquery ile input nesne silme

Arkadaşlar öncelikle merhaba iyi çalışmalar,

php ile yönetim panelli online sipariş sistemi yazıyorum. ürün ekleme bölümünde detaylar için yeni inputlar ekleyerek detay, fiyat şeklinde yazdıracaktım. Jquery ile eklemeyi yaptım fakat silme işleminde tıkladığım butonu seçemedim. Sizden bu konuda destek bekliyorum. Tıkladığım butonu seçerek o input bölümünü silmek istiyorum.

Gerekli kaynak kodlarımı aşağıda verdim.
Şimdiden teşekkürler, iyi çalışmalar dilerim

<div class="inputContainer">
    
    <div class="form-group row">
        <div class="col-11">
            <input type="text" class="form-control" name="product_image">
        </div>
        <div class="col-1">
            <button class="btn btn-danger w-100 removeInput" type="button">
                <i class="fa fa-trash"></i>
                Sil
            </button>
        </div>
    </div>
    
    <!-- Yeni inputlar bu alana gelecek -->
    
</div>

$(function () {
    var yedek = $(".yedek");
    var addInuput = $(".addInuput");
    var text = "selam";
    var inputContainer = $(".inputContainer");
    var removeInput = $(".removeInput");
    var newInput = "<div class='form-group row'><div class='col-11'><input type='text' class='form-control' name='product_image'></div><div class='col-1'><button class='btn btn-danger w-100 removeInput'type='button'><i class='fa fa-trash'></i>Sil</button></div></div>"
    addInuput.on("click", function() {
        inputContainer.append(newInput);
        /*
        
        Burada ekleme işlemi yapıldıktan sonra event ekliyorum
        Event dan önce yaptığımda ise sadece dosyanın
        içinde kayıtlı olan inputa event ekleniyor ekle 
        butonuyla eklenen inputların silme butonları geçersiz 
        oluyor onlarda event olmuyor. 
        
        */
        removeInput.on("click", function (){
            $(this).parent().parent().remove();
        });
    });
});

ilyasbilgihan

1310 gün önce

removeInput değişkeninin değeri sayfa yüklendiğinde tanımlanmış. Dolayısıyla yalnızca ekleme yapmadan önceki .removeInputlar seçili. Her ekleme yaptığında removeInput.on("click") fonksiyonundan önce removeInput değerini de güncellemelisin.

addInuput.on("click", function() {
    inputContainer.append(newInput);

    removeInput = $(".removeInput"); // Bu satırı ekle
    
    removeInput.on("click", function (){
        $(this).parent().parent().remove();
    });
});

Not: removeInput.on("click") fonksiyonu addInput.on("click") fonksiyonunun içerisinde tanımlandığından. Sayfa sıfırdan yüklendiğinde henüz add işlemi gerçekleşmediğinden, mevcut sayfadaki inputlara remove işlemi uygulayamazsın. Uygulamak istersen ekstradan addInput.on("click") fonksiyonun dışına tekrardan bir remove işlemi gerçekleştirecek fonksiyon yazabilirsin.

#004626

Tüm Cevapları Göster (3)