クラスの有無に基づいて要素を追加/削除する

Question

削除ボタンが表示されなくなりましたが、そのページには.newCarしか見つかりません。 newCar（およびnewDate）は、[追加]ボタンが追加された後にのみ表示されます。 つ以上の車がある場合は（私は新しいカレンダーを必要とするので.newDateをクローニングすることができないフィールドが毎回発生したので、ここでは2つの異なるクラスをしました。）

要するに、[削除]ボタンのみが表示されます（すなわち、フィールドセット内のフィールドが複製されます）。

私は様々なテクニックを試してきましたが、現在のものは.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

[OK]を、確認してくださいポストの下部にあるリンクをクリックします。これが私の提案です。

1. あなたが唯一の「多くの車を追加」ボタンを押したとき、あなたは物事を削除すると、あなたもそれを確認してください「newCar」をチェックします。そのため、私は小切手を機能させました。

2. あなたは非常に複雑なチェックを書いています。 $（ 'class'）。この場合は長さで十分です（私はそれをどのように修正したかをフィドルで見ることができます）。 要素が存在するかどうかを確認するには、次のようにします：

3. 要素を非表示にするか表示するには、CSSを変更する必要はありません。$（ 'class'）を使用できます。 （）;または$（ 'class'）。show（）;これは、ディスプレイをブロックにするか、まったく同じにすることと同じです。

また、コードをもう少しチェックすることをお勧めします。短くて良いことがたくさんあります。しかし、その後、再び、我々はすべてどこかに開始:)

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

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

Answer 2

何をする必要がボタンを非表示にしたりしないように削除ボタンをクリックしたときにチェックしているを作成しました。あなたが削除した場合、それは削除ボタンを非表示にする場合

$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'); 
    } 
}); 

このチェック：クリック機能に$removeButtonでは、次の操作を行います。あなたのコードは$addMoreBtnの中のあなたの$removeBtnの中に入れられたクリック機能です。 $addMoreBtnの状態を変更して、最初のステートメントだけを持つようにします。 [Add More Cars]をクリックすると、削除ボタンがdisplay: blockに設定され、表示されます。一言で言えばで

アップデートコード：私は、クリックされたときに削除ボタンを表示するにはクリック機能に$addMoreBtnにコードを設定し、$removeBtn機能にあなたの$addMoreBtn機能で元の状態チェックコードを追加しました。これにより、現在の削除ボタンがクリックされた後に削除ボタンが表示されるかどうかがチェックされます。ここで

が更新フィドルである：ここでは

Fiddle

もスニペットです：私はあなたのフィドルを更新し、すべての最初の、

var $form = $('#form'), 
 
     $fieldsetWrap = $('.fieldset-wrap'), 
 
     //$newCar = $('.fieldset-wrap .newCar'), 
 
     $addMoreBtn = $('.actions .addMoreBtn'), 
 
     $removeBtn = $('.actions .removeBtn'); 
 

 
// Add stuff 
 
$addMoreBtn.on('click', function() { 
 
\t // Clone the first instance of .core \t 
 
    $('.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" 
 
    }); 
 
});

form{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-bottom: 80px; 
 
} 
 
label{ 
 
    float: left; 
 
    clear: both; 
 
    margin-bottom: 20px; 
 
    padding-right: 20px; 
 
} 
 
.fieldset-wrap{ 
 
    overflow: hidden; 
 
    float: left; 
 
    clear: both; 
 
} 
 
.core{ 
 
    float: left; 
 
    clear: both; 
 
} 
 
.date{ 
 
    margin-bottom: 30px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid red; 
 
    overflow: hidden; 
 
    float: left; 
 
    clear: both; 
 
} 
 
fieldset, button{ 
 
    float: left; 
 
    clear: both; 
 
    margin-bottom: 20px; 
 
} 
 
.actions{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    .button{ 
 
     float: left; 
 
     clear: both; 
 
    } 
 
} 
 
.removeBtn{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" action=""> 
 
    <label for="">Name<input type="text" /></label> 
 
    <label for="">Age<input type="text" /></label> 
 
    <div class="fieldset-wrap"> 
 
     <div class="core"> 
 
     <label for="">Car&nbsp;<input type="text" /></label> 
 
     <label for="">Model&nbsp;<input type="text" /></label> 
 
     </div> 
 
     <div class="date"> 
 
      <label for="">Date <input class="datepicker_multi" name="datepicker[]"/></label> 
 
     </div> 
 
    </div> 
 
    <div class="actions"> 
 
     <button class="addMoreBtn" type="button">Add more cars</button> 
 
     <button class="removeBtn" type="button">remove</button> 
 
    </div> 
 
</form>