v2.5.2
Giriş yap

Jquery ile input nesne silme

bilinmez1i
1,409 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();
        });
    });
});
tayfunerbilen
1342 gün önce

şu alanı dışarıya alın ve

removeInput.on("click", function (){
    $(this).parent().parent().remove();
});

şöyle değiştirin

$(document.body).on("click", ".removeInput", function (e){
    e.preventDefault();
    $(this).closest('.form-group').remove();
});

Not: bu arada closest() ile yukarı etiketi seçmek daha kolay olur senin için. parent().parent() diye üste çıkmak yerine closest('.form-group') dediğin zaman ilgili elemana en yakın olanı otomatik seçmiş olursun.