Удалить вход индивидуально

Question

Я хочу добавить пронумерованные входы в их имени (уже успешно сделал), но также удалить их одним нажатием кнопки, если пустым (не удалось). С помощью этого кода ВСЕ входы класса поиска стираются. Я хочу, чтобы пустые были удалены. Вот моя попытка:

<script type="text/javascript"> 
// contains the counter for elements added 
window.__buttonClickCounter = 1; 

// Keep reference to container 
var c = document.getElementById('inputs'); 

// Click handler that appends to the contents of the container 
var clickhandler = function() { 
    c.innerHTML = c.innerHTML + "<input class='search' style='margin-bottom:4px;' type='search'   name='word" + window.__buttonClickCounter + "'/>"; 
    window.__buttonClickCounter++; 

    $('#removebtn').click(function() { 
     $('.search').remove(); 
    }); 
} 
</script> 

Спасибо!

Answer 1

Вы можете написать его с помощью JQuery следующим

$(function(){ 
    var counter = 0; 
    $('#addbtn').click(function(){ 
     $('#inputs').append('<input class="search" style="margin-bottom:4px;" type="search"   name="' + counter++ + '"/>') 
    }); 

    $('#removebtn').click(function(){ 
     $('.search').each(function(){ 
      var $this = $(this); 
      if(!$this.val()){ 
       $this.remove() 
      } 
     });  
    }); 
}) 

Демо: Fiddle

Answer 2

Вы можете отфильтровать непустые те из объекта JQuery перед вызовом .remove() как это (таким образом, удаляя только пустой из них):

$('#removebtn').click(function() { 
    $('.search').filter(function() {return !this.value}).remove(); 
}); 

Если .filter() обратного вызова возвращает true, то элемент сохраняется. Если он возвращает false, тогда значение будет удалено из результирующего объекта jQuery. Таким образом, это начинается со всех объектов .search, а затем сохраняет только те, где !this.value - true, что означает, что он держит те, где this.value является ложным (например, пустым), так что только пустые получат .remove().

---

Или, чуть более многоразовый путь:

// Reusable jQuery method for filtering out non-empty input values 
// Also filters out items that don't have a `.value` property 
$.fn.filterNonEmpty = function() { 
    return this.filter((function() {return !this.value}); 
}; 

// now use this new jQuery method 
$('#removebtn').click(function() { 
    $('.search').filterNonEmpty().remove(); 
});