上唯一的場動態添加輸入字段有一個按鈕，無需刪除按鈕

Question

我想使用的代碼從這個jsfiddle到更多的領域動態加載到窗體：

$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
    }); 
$('.multi-field .remove-field', $wrapper).click(function() { 
    if ($('.multi-field', $wrapper).length > 1) 
     $(this).parent('.multi-field').remove(); 
    }); 
}); 

一切都很正常，但問題在於只有一個字段時，「刪除」按鈕將保留在那裏。

我想讓它看起來像this當只有一個字段。 javascript使用clone函數。如果我刪除刪除按鈕，則會在添加更多字段時將其從所有後續「克隆」中刪除。我對JavaScript很陌生。當只有一個字段實例時，是否有人有關於如何刪除「刪除」按鈕的建議？

Answer 1

看看這個簡單的解決方案，它不會刪除按鈕，但調整的知名度。根據您的應用程序，這可能是不夠的：

http://jsfiddle.net/hMJEy/1933/

$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
     $('.multi-field .remove-field', $wrapper).show(); 
    }); 
    $('.multi-field .remove-field', $wrapper).click(function() { 
     if ($('.multi-field', $wrapper).length > 1) { 
      $(this).parent('.multi-field').remove(); 
     } 
     adjustButtonVisiblity(); 
    }); 

    adjustButtonVisiblity(); 
    function adjustButtonVisiblity() { 
     if ($('.multi-field', $wrapper).length == 1) { 
       $('.multi-field .remove-field', $wrapper).hide(); 
     } 
    } 
}); 

Answer 2

我更新了小提琴。 http://jsfiddle.net/hMJEy/1932/

$('.multi-field-wrapper').each(function() { 

    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
    $('.remove-field').show(); 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
    }); 
    $('.multi-field .remove-field', $wrapper).click(function() { 
     if ($('.multi-field', $wrapper).length > 1){ 
      $(this).parent('.multi-field').remove(); 
      if($('.multi-field', $wrapper).length == 1) 
      {$('.remove-field').hide();} 

      } 
      else{} 
    }); 
}); 

Answer 3

你可以試試這個：

$('.multi-field-wrapper').each(function() { 
 
    var $wrapper = $('.multi-fields', this); 
 

 
    // New code 
 
    if ($('.multi-field').length < 2) 
 
    $('.remove-field', $wrapper).hide(); 
 
    else 
 
    $('.remove-field', $wrapper).show(); 
 

 
    $(".add-field", $(this)).click(function(e) { 
 
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
 

 
    // New code 
 
    $('.remove-field', $wrapper).show(); 
 
    }); 
 

 
    $('.multi-field .remove-field', $wrapper).click(function() { 
 
    if ($('.multi-field', $wrapper).length > 1) 
 
     $(this).parent('.multi-field').remove(); 
 

 
    // New code 
 
    if ($('.multi-field').length < 2) 
 
     $('.remove-field', $wrapper).hide(); 
 
    else 
 
     $('.remove-field', $wrapper).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" action="/wohoo" method="POST"> 
 
    <label>Stuff</label> 
 
    <div class="multi-field-wrapper"> 
 
    <div class="multi-fields"> 
 
     <div class="multi-field"> 
 
     <input type="text" name="stuff[]"> 
 
     <button type="button" class="remove-field">Remove</button> 
 
     </div> 
 
    </div> 
 
    <button type="button" class="add-field">Add field</button> 
 
    </div> 
 
</form>

Answer 4

您可以使用一個簡單的邏輯來隱藏/顯示刪除按鈕像

$(".multi-field-wrapper .add-field").click(function(e) { 
 
    var $wrapper = $(this).prev('.multi-fields'); //or $(this).closest('.multi-field-wrapper').find('.multi-fields'); 
 
    $wrapper.find('.multi-field:first-child').clone(true).appendTo($wrapper).find('input').val('').focus(); 
 
    $wrapper.find('.remove-field.hidden').removeClass('hidden'); 
 
}); 
 

 
$('.multi-field-wrapper').on('click', '.remove-field', function() { 
 
    var $this = $(this), 
 
    $field = $this.closest('.multi-field'), 
 
    $others = $field.siblings('.multi-field'); 
 
    $field.remove(); 
 
    $others.find('.remove-field').toggleClass('hidden', $others.length == 1); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" action="/wohoo" method="POST"> 
 
    <label>Stuff</label> 
 
    <div class="multi-field-wrapper"> 
 
    <div class="multi-fields"> 
 
     <div class="multi-field"> 
 
     <input type="text" name="stuff[]"> 
 
     <button type="button" class="remove-field hidden">Remove</button> 
 
     </div> 
 
    </div> 
 
    <button type="button" class="add-field">Add field</button> 
 
    </div> 
 
</form>

Answer 5

working fiddle 

i think its meet your requirment 

http://jsfiddle.net/hMJEy/1934/

Answer 6

你可以隱藏按鈕「刪除」使用CSS

CSS代碼：

.multi-field:first-child .remove-field { 
     display: none; 
} 

，或者你可以用JS做到這一點，爲此，你需要改變這樣的方式，你的代碼：

$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
      var $el = $('.multi-field:first-child', $wrapper).clone(true); 
     var $removeButton = $('<button type="button" class="remove-field">Remove</button>'); 
     $removeButton.click(function() { 
      if ($('.multi-field', $wrapper).length > 1) 
      $(this).parent('.multi-field').remove(); 
      }); 
     $el.append($removeButton); 
      $el.appendTo($wrapper).find('input').val('').focus(); 
    }); 
}); 

jsfiddle

這裏被複制元件 「輸入」 ，然後創建一個「按鈕」的元素，這是一個懸掛點擊處理程序，然後將該按鈕添加到元素「輸入」