Jquery ile input nesne silme

bilinmez1i 1349 gün önce

1,414 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();
        });
    });
});

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

tayfunerbilen

1349 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.

#004628

ilyasbilgihan

1349 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

hakankorkz

1349 gün önce

silinicek butona sil class ver sonra js de remove yap kardeşim yapamazsa yaz mobilde olduğum için ben yazamadım pc geçince halederim..

#004623