2016-03-30 19 views
0

benim forma inputfield eklemek için aşağıdaki işlevi yarattı:Kaldır eklenen giriş alanları

function add_parameter(){ 
    var d = document.getElementById("content"); 

    d.innerHTML += "<br/><br><div class='custom_search col-md-5'><span><select class='form-control' name='fketens'><option>1</option><option>2</option><option>3</option><option>4</option></select></span></div><div class='keten2 col-md-7'><span><input type='text' class='form-control' id='keten2' placeholder='Enter keten name' name='keten2' /></span></div>"; 
}; 

Ve bu benim dizin dosyası kodudur: şimdi

<div id="content"> 
    <div class="custom_search col-md-5"> 
     <span> 
      <select class="form-control" name="fastfoodketens"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
     </span>  
    </div>  
    <div class="keten2 col-md-7"> 
     <span><input type="text" class="form-control" id="keten2" placeholder="Enter keten name" name="keten2"></input></span> 
    </div> 

Ama Ayrıca eklenen alanları kaldırabilecek bir silme düğmesi yapmak istiyorum. Bunu yapmanın en iyi yolu nedir?

+0

jquery'i kaldırmayı denediniz mi? . eklediğiniz alanlara veya "eklenmiş alanlar" gibi öğelere bir sınıf eklemek isteyebilirsiniz ve daha sonra bu sınıf için sınıf listesini seçebilir ve jquery kaldırmasıyla kaldırabilirsiniz. –

+0

http://stackoverflow.com/questions/16183231/jquery-append-and-remove-dynamic-table-row http://jsfiddle.net/samliew/3AJcj/2/ – llamerr

cevap

1

Kanımca, her yeni eklenen giriş dosyalama hattı için bir çıkarma düğmesi eklemeyi tercih ediyorum. Ve bu kaldır düğmesi bu satırı kaldıracaktır.

function add_parameter(){ 
    var d = document.getElementById("content"); 
    d.innerHTML += "<div class='new-row'><div class='custom_search col-md-5'><span><select class='form-control' name='fketens'><option>1</option><option>2</option><option>3</option><option>4</option></select></span></div><div class='keten2 col-md-7'><span><input type='text' class='form-control' id='keten2' placeholder='Enter keten name' name='keten2' /></span><a href='#' class='remove-btn'>Remove</a></div></div>"; 
}; 

//remove current line 
$('#content').on("click", "a.remove-btn", function(){ 
    $(this).closest(".new-row").remove(); 
}); 

Yeni eklenen 2 div eklemek için 2 div ekleyin ve sonra silme işlevinde kaldırın.

+0

Çözmeyi denediniz ama değil ' Giriş alanlarını silmeyin. Mabey mi, çünkü iki div kullanıyorum? Çünkü custom_search ve keten2 var mı? –

+0

Çözüm sadece bir fikir. HTML yapınıza bağlı olarak değiştirmeniz gerekebilir. Cevabımı değiştirdim. –

+0

Bu sorunu çözdü! Teşekkürler! –