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

jQuery ile DIV Silme

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <style>


    .tab-content {
      border: 1px solid green;
      padding: 10px;
      margin: 10px;
      display: inline-block;
    }


    .form-group {
      width: 150px;
      height: 50px;
    }


    .form-group input {
      width: 50px;
    }


    .form-group input, .form-group div {
      display: inline-block;
      margin-bottom: 15px;
    }


  </style>
  <script src="http://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
  <body>


    <div class="tab-content">


    </div>


    <div class="tab-content">


    </div>


    <div class="tab-content">


    </div>


    <hr>


    <input type="text" class="title">
    <div class="column-add">Ekle</div>


    <script type="text/javascript">
      $('.column-add').on("click", function () {
      	var tag = $("input.title").val();
      	$('.tab-content').append('<div class="form-group"><label>' + tag + '</label><input type="text"><div onclick="columnDelete(this);">SİL</div></div>');
      });


      function columnDelete(element) {
        $(element).parent().remove();
      }
    </script>


  </body>
</html>


Merhaba arkadaşlar. Tab mantığı ile kurulmuş bir yapımda verdiğim örnekteki gibi bir yapım var.


input içine başlık yazıp ekle dediğimde her tab-content class'ına sahip divin içine birer tane ekliyor.

Ben istiyorum ki, eklenen içeriklerden her hangi birini sildiğimde, diğer tab-content div'inin içindeki aynı içeriğide silsin.

Ama sile basınca sadece seçtiğim siliniyor.


Umarım anlatabilmişimdir. Yardımlarınızı bekliyorum :)

2

Cevaplar (2)

İşlem devam ediyor, lütfen bekleyin..
Selim
@Selim
6 gün önce
var a=1; 
$('.column-add').on("click", function () {
      	var tag = $("input.title").val();
      	$('.tab-content').append('<div class="form-group tag-' +tag+'-'+a+ '"><label>' + tag + '</label><input type="text"><div onclick="columnDelete(this);">SİL</div></div>');
  a++;
      });




      function columnDelete(element, index) {
        // $(element).parent().remove();
        var name = $(element).parent()[0].className ;
        var substr = name.indexOf(' ');
        var length = name.length;
        $('.' + name.substr(substr+1, length)).remove();
      }

js kodunu bu şekilde yaptım. Yukarıda bir 'a' değişkeni var. Onun amacı aynı texte sahip olanların hepsinin değilde aynı indextekileri silemek için. Sen hepsinin silinmesini istersen 'a' değişkenini kaldırabilirsin

İşlem devam ediyor, lütfen bekleyin..
Serdar Güler
@gulers
6 gün önce

Bende böyle birşey yapmıştım. https://codepen.io/serdarguler/pen/xBWONw

İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın

Yabancı Dizi Arşivi