Скрытие элемента

Question

Сверстал форму, которая по клику добавляет элементы. У добавленных элементов реализовал кнопку "удалить элемент" и "свернуть элемент" с помощью jquery. Удаление работает как надо, а кнопка "свернуть" сворачивает все добавленные элементы, а нужно один конкретный. Не пойму, почему так происходит, прошу помочь.

$(document).ready(function() {
  function addCase() {
    let name = $('input').val(),
        text = $('textarea').val();
    if(name.length !== 0 && text.length !== 0) {
      $('input').removeClass('error');
      $('textarea').removeClass('error');
      $('.cases-none').hide();
      $('.cases-list').append(`
        <div class="cases-item">
          <div class="case-author">${name}
            <button class="case-delete"></button>
            <button class="case-button"></button>
          </div>
          <div class="case-textos">${text}</div>
        </div>
      `);
      name = $('input').val('');
      text = $('textarea').val('');
    } else {
      $('input').addClass('error');
      $('textarea').addClass('error');
    }
  }

  function hideCase() {
    let gryb = $('.case-textos');
    sbyb = $('.case-button');
    gryb.slideToggle();
    sbyb.toggleClass('case-down');
  }

  function deleteCase(item) {
    item.remove();
    let items = $('.cases-item');
    if(items.length == 0) {
      $('.cases-none').show();
    }
  }

  $('.case-add').on('click', addCase);

  $('body').on('click', '.case-delete', function(event) {
    event.preventDefault();
    let item = $(this).parents('.cases-item');
    deleteCase(item);
  });

  $('body').on('click', '.case-button', function(event) {
    event.preventDefault();
    let souls = $(this).parents('.case-author');
    hideCase(souls);
  });
});

Answer 1

Это потому что ты удалении в функцию deleteCase передаешь еэлемент item который необходимо удалить и выполняешь item.remove();

А в hideCase ты ищешь все элементы .case-textos в DOM - дереве и применяешь к ним

Необходимо применить к конкретному элументу

$('body').on('click', '.case-button', function (event) {
    event.preventDefault();
    let el = $(this).closest('.cases-item').find('.case-textos');
    hideCase(el);
});

function hideCase(gryb) {
    gryb.slideToggle();
    $('.case-button').toggleClass('case-down');
}

Answer 2

Я уже в замешательстве, ну все равно не работает, в консоли ошибок тоже нет((

$(document).ready(function(){

  function addCase() {
    let name = $('input').val(),
        text = $('textarea').val();

    if (name.length !== 0 && text.length !== 0) {

        $('input').removeClass('error');
        $('textarea').removeClass('error');
        $('.cases-none').hide();
        $('.cases-list').append(`

            <div class="cases-item">
                <div class="case-author">${name}
                <button class="case-delete"></button>
                <button class="case-button"></button>
                </div>
                <div class="case-textos">${text}</div>
            </div>

        `);

        name = $('input').val('');
        text = $('textarea').val('');


    } else {
        $('input').addClass('error');
        $('textarea').addClass('error');
    }
  }

  $('.case-button').on('click', function (event) {
    event.preventDefault();

    let el = $(this).closest('.cases-item').find('.case-textos');
    hideCase(el);
  });   

  function hideCase(textel) {

    textel.slideToggle();
    $('.case-button').toggleClass('case-down');
  }

  function deleteCase(item) {
    item.remove();

    let items = $('.cases-item');

    if (items.length == 0) {
        $('.cases-none').show();

    }
  }

  $('.case-add').on('click', addCase);

  $('body').on('click', '.case-delete', function(event){
    event.preventDefault();

    let item = $(this).parents('.cases-item');

    deleteCase(item);

  });

});

Answer 3

	<body>
<div class="fixed-container">
<div class="cases">
<h2>Список дел:</h2>
	<div class="cases-none">Список пуст...</div>
		<div class="cases-list">
			
		</div>	
	</div>
	<div class="add-cases">
		<h2>Добавить новое дело</h2>
			<div class="white-container"> 
	<label class="case-label">
		<span>*Название</span>
		<input type="text" name="name" placeholder="Напишите дело">
		</label>
		<label class="case-label">
		<span>*Описание</span>
		<textarea name="message" placeholder="Напишите что-нибудь..."></textarea>
		</label>
		<button class="case-add">Добавить дело</button>
		</div>
	</div>
	</div>
	<script src="jquery-3.5.0.min.js"> </script>
	<script src="calendar.js"></script>	
	</body>
</html>

БЛОГ НА HUSL

Скрытие элемента

Ответы (3 шт):