如果没有可用的动态创建的表单文件，则显示一个按钮

Question

我有一个带有'添加'和'删除'字段选项的字段，我的问题是如果有人在第一时间单击删除按钮，那么就没有任何东西了。但是我创建了另一个按钮并通过此代码隐藏它。 $('#more_fields').hide();

可以在没有字段或没有deleteMe类可用的按钮时显示此按钮

我正在使用此代码删除字段。

$(document).on("click",".deleteMe", function(){
           $(this).closest(".addform").remove(); 
      });

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="addform"><div class="input-group"> 	<label for="Services">Services '+room+'</label>    <input type="text" class="form-control" id="Services" name="serve[]" style="max-width: 148px;" placeholder="Add Services">    <span class="input-group-btn" >   		<button class="btn deleteMe" style="">&times;</button> 	 <button class="btn btn-success pull-right"  onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button>     </span> </div></div>';
    
    objTo.appendChild(divtest)
}
        


//]]> 
  $(document).on("click",".deleteMe", function(){
       $(this).closest(".addform").remove(); 
     
	   
  });
  

$('#more_fields').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form class="form-inline">
<div class="">
 <div class="form-group">
 
 
<div id="room_fileds" class="text-center">

<div class="addform">



<!--<label for="qualification">Services 1</label>
<input type="text" class="form-control" id="Service"  style="" placeholder="Add Services">
-->
<div class="input-group">
	<label for="Services">Services 1</label>
   <input type="text" class="form-control" id='Services' name="serve[]" style="max-width: 148px;" placeholder="Add Services">
   <span class="input-group-btn" >
  		<button class="btn deleteMe" style="">&times;</button>
	 <button class="btn btn-success pull-right"  onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button>

   </span>
</div>

<span id="err_quali" style="color:red;display:none;font-size:13px;padding-left:105px;">Enter only Chars</span>
								
</div>
</div>
<input type="button" class="btn btn-success btn-sm" id="more_fields" onclick="add_fields();" value="Add Services" />
								 
								 
</div>
</div>
  </form>

Answer 1

删除

就像

一样

room -= 1;

比在某些时候你做的

if(room===0) { /*here show your button */ }

我注意到您使用了#err_quali，#Services等按钮的ID ...不要。您将在页面上加载重复ID，这是错误的。改为使用类。

<强> jsBin demo

＆＃13;

＆＃13;

var rooms = 1;
var c = 1;
var $roomsWrapper = $("#room_fileds"); // the parent
var $room  = $(".input-group").clone(); // Store a group

$('#more_fields').hide();

$(".form-inline").on("click", ".deleteMe", function(ev) {
  
  ev.preventDefault();
  rooms -= 1;
  $(this).closest(".input-group").fadeOut(300, function(){
    $(this).remove();
  });
  $('#more_fields').toggle( !rooms );
  
}).on("click", ".addField, #more_fields", function(ev) {

  ev.preventDefault();
  rooms += 1;
  c += 1;
  var $klon = $room.clone();
  $klon.find(".groupNum").text(c);
  $roomsWrapper.append( $klon );
  
});

＆＃13;

.err_quali{
  color:red;
  display:none;
  font-size:13px;
  padding-left:105px;
}

.form-control{
  max-width: 148px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form class="form-inline">
  <div id="room_fileds">

    <!-- CLONABLE FIELD HELPER -->
    <div class="input-group">
      <label for="Services">Services <span class="groupNum">1</span></label>
      <input type="text" name="serve[]" placeholder="Add Service">
      <span class="err_quali">Enter only Chars</span>
      <span class="input-group-btn" >
        <button class="deleteMe btn">&times;</button>
        <button class="addField btn" type="button">+</button>
      </span>
    </div>

    <!-- Here jQuery appends Room group clones -->

  </div>

  <button id="more_fields">Add Services</button>
</form>

＆＃13;

＆＃13;

＆＃13;