Как одновременно убрать два дочерних элемента с помощью $ (this)

Question

У меня есть div в котором 3 кнопки. Я ожидаю, что когда я нажму 3-ю кнопку, 2-я и 3-я кнопки должны исчезнуть ... но на самом деле исчезает только 3-я кнопка ... почему так?

Вот, мой code

<div id="bttns">
<button class="btn btn-danger"> Delete </button>     //1st Button
<button class="btn btn-warning"> Modify </button>    //2nd Button
<button class="btn btn-success"> Complete </button>  //3rd Button
</div>

А вот jQuery

$(".btn-success").on("click", function(){
 $( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})

Я не смог найти вопрос, похожий на мой ... а также я новичок во всем этом, так что если вы обнаружите, что такой вопрос существует, перенаправьте меня на него.

Answer 1

Это происходит потому, что:

 $( $(this) , $(this).parent().children(".btn-warning") )

здесь недопустимый селектор. Чтобы связать несколько объектов jQuery, вы можете использовать метод .add(), а затем вызвать .fadeOut(500) в коллекции, например:

$(".btn-success").on("click", function() {
  var $btn3 = $(this);
  var $btn2 = $(this).parent().children(".btn-warning");
  $btn2.add($btn3).fadeOut(500)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
  <button class="btn btn-danger"> Delete </button>
  <button class="btn btn-warning"> Modify </button>
  <button class="btn btn-success"> Complete </button>
</div>

Answer 2

Как вы назначили классы. Вы можете go вот так: -

$(".btn-success").on("click", function () {
     $('.btn-warning, .btn-success').fadeOut(500);
})

Answer 3

вы гасите только кнопку с классом btn-warning. вместо этого используйте два селектора.

$(".btn-success").on("click", function(){
 $(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})