Jquery ile input nesne silme
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();
});
});
});
ş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.