Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

javascript append ile istediğim yere ekleme yapmıyor

Aşağıdaki kodlara göre input-group-append classı içerisindeki butonu kaldırıp yerine javascript kodu içerisindeki kodu ekletmek istiyorum kısaca butonu değiştirmek istiyorum.


Aşağıda ki resimde de gördüğünüz gibi içeriğinden kodu silip dışına istediğim butonu ekliyor.


yerine

ile değiştirmesini istiyorum kısaca



                                <div class="col-md-12">
                                    <div class="form-group row" id="telefonAlanlari">
                                        <label class="col-sm-3 col-form-label">Telefon</label>
                                        <div class="col-sm-3">
                                            <select name="kayit_tipi" class="form-control">
                                                <option value="">Seçiniz</option>
                                                <?php          
                                                $query = $db->query("SELECT * FROM kodlar_detay WHERE kodlar_master_id = 50", PDO::FETCH_ASSOC);
                                                if ( $query->rowCount() ){
                                                    foreach( $query as $row ){
                                                        echo '<option value="'.$row["id"].'">'.$row["deger"].'</option>';
                                                    }
                                                }
                                                ?>
                                            </select>
                                        </div>
                                        <div class="input-group  col-sm-6">
                                                <input type="text" id="telefon" name="telefon[]" class="form-control" required>
                                            <div class="input-group-append">
                                                <a href="javascript:void(0)" class="btn btn-icons btn-inverse-success add"><i class="mdi mdi-plus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="buraya"></div>
                                </div>

                    
<script type="text/javascript">
$(document).ready(function(){

    $(document).on("click", ".add", function(){

        // Klonlamak için formun ilk öğesini tanımla
        var row = $("#telefonAlanlari").clone();

        // "kaldır" linki ekle, "ekle" linkini kaldır
        row.append('<a href="javascript:void(0)" class="btn btn-icons btn-inverse-danger remove"><i class="mdi mdi-plus"></i></a>')
           .find(".add").remove();

        // Klonu ekle
        $("#buraya").append(row);

    });

    // Kaldır
    $(document).on("click", ".remove", function(){
        // Kaldır
        $(this).parent("#telefonAlanlari").remove();
    });

}); //doc ready end
</script>


İstediğim divin içine alamadığım için aşağıdaki gibi görüntü oluşuyor. Kırmızı olan butonları yeşil buton gibi yanına almam lazım bunun için de o classın içerisinde olması gerekiyor.


1

Cevaplar (1)

İşlem devam ediyor, lütfen bekleyin..
Emre BÜYÜKDURMUŞ
@ebykdrms
4 ay önce [Güncellendi]
var row = $("#telefonAlanlari").clone();

dediğinizde #telefonAlanlari elemanının tamamının klonunu oluşturuyorsunuz.


row.append('<a ...>').find('.add').remove();

dediğinizde, #telefonAlanlari alanının direkt içine a elementini ekliyorsunuz.

Oysaki siz #telefonAlanlari içindeki div.input-group-append içine ekleme yapmak istiyorsunuz.

Bu nedenle, append yaptığınız satırda row.find() kullanmanız gerekiyor:

row.find('.input-group-append').append('<a ...>');
row.find('.add').remove();
İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın