Fiddle

Question

我正在寻找删除按钮消失，但前提是只有在页面上找不到.newCar。只有在添加“添加更多”按钮后，才会显示课程newCar（和newDate）。（我在这里有两个不同的类，因为无法克隆字段.newDate，因为我每次都需要生成一个新日历。）

简而言之，只有当多个汽车（即字段集中的字段被克隆）时，才会显示“删除”按钮。

我一直在尝试各种技术，我现在使用的是.hasClass方法，但我不确定为什么它不起作用。

if ($('.core:last').hasClass('newCar')){
  $(this).parents('#form').find($removeBtn).css('display', 'block');
}
else{
  $(this).parents('#form').find($removeBtn).css('display', 'none');
}

我创造了一个小提琴here

Answer 1

您需要做的是检查何时单击“删除”按钮以隐藏按钮。在$removeButton点击功能中，执行以下操作：

$removeBtn.on('click', function(){
    $(this).parents($form).children($fieldsetWrap).find('.newCar:last, .newDate:last').remove();

    if ($('.core:last').hasClass('newCar')){
        $(this).parents('#form').find($removeBtn).css('display', 'block');
    }
    else{
        $(this).parents('#form').find($removeBtn).css('display', 'none');
    }
});

这会检查删除时是否应隐藏删除按钮。这只是您$addMoreBtn内点击功能的$removeBtn中的代码。您还可以更改$addMoreBtn中的条件以获得第一个语句。这会在点击添加更多汽车时将删除按钮设置为display: block以显示它。

简而言之更新代码：我在点击功能{@ 1}}中设置代码，以便在点击时显示删除按钮，并在{{1}中添加原始条件检查代码函数进入$addMoreBtn函数。这将检查在单击当前删除按钮后是否应显示删除按钮。

这是一个更新的小提琴：

Fiddle

这也是一个片段：

$addMoreBtn

$removeBtn

var   $form = $('#form'),
      $fieldsetWrap = $('.fieldset-wrap'),
      //$newCar = $('.fieldset-wrap .newCar'),
      $addMoreBtn = $('.actions .addMoreBtn'),
      $removeBtn = $('.actions .removeBtn');

// Add stuff
$addMoreBtn.on('click', function() {
	 // Clone the first instance of .core	
   $('.core:first').clone().appendTo($fieldsetWrap).addClass('newCar');
   // Append the following html so new calendar is create each time
   $fieldsetWrap.append('<div class="date newDate"><label for="">Date<input class="datepicker_multi" name="datepicker[]"/></label><div>');
   
   $(this).parents('#form').find($removeBtn).css('display', 'block');
});
// Remove stuff
$removeBtn.on('click', function(){
   $(this).parents($form).children($fieldsetWrap).find('.newCar:last, .newDate:last').remove();
   
   if ($('.core:last').hasClass('newCar')){
        $(this).parents('#form').find($removeBtn).css('display', 'block');
   }
   else{
        $(this).parents('#form').find($removeBtn).css('display', 'none');
   }
});

// Enable jQuery UI date picker on focus
$($fieldsetWrap).on('focus','.datepicker_multi', function(){
   $(this).datepicker({
      dateFormat: "dd-mm-yy"
   });
});

Answer 2

好的，首先我更新了你的小提琴，检查帖子底部的链接。这就是我的建议。

您只需在按下“添加更多车辆”按钮时检查“newCar”，您还应该在删除时检查它。因此，我做了检查功能。
你写的支票非常复杂。 $（'class'）。长度在这种情况下就足够了（你可以在小提琴中看到它如何修复它）。您可以通过以下方式检查元素是否存在：
您不必更改元素的CSS以隐藏它或显示它，您可以只使用$（'class'）。hide（）;或$（'class'）。show（）;。这与将显示设置为阻止或不设置相同。

此外，我建议您再检查一下代码，有很多可以更短更好。但话说回来，我们都从某处开始：）

https://jsfiddle.net/218csoy7/5/

if($('class').length) {
    //Do something because it exists
} else {
   //Ok, now it doesn't exist
}

根据类的存在/不存在添加/删除元素

2 个答案:

Fiddle