jQuery - Скрыть значок удаления, если элементы или элементы родного брата не добавлены

Question

У меня есть форма, которая позволяет пользователям динамически добавлять или удалять строки, нажимая + или - соответственно. Но пользователи не должны иметь возможность удалять самую первую строку любого дня, поэтому должно быть только -, если они добавили хотя бы одну строку к рассматриваемому дню.

В настоящее время Я справляюсь с этим, просто не отвечая на remove(), когда нажимается значок - и имеется только 7 строк (абсолютный минимум).

Вот код:

https://jsfiddle.net/b92sh7yn/

В частности, обсуждаемый обходной путь находится здесь:

 function remove() {
   if (cloneIndex > 7) {
     $(this).closest(".actions").prev(".time-interval").remove();
     cloneIndex--;
   }
   console.log(cloneIndex);
 }

Это работает, но я хочу, чтобы поведение не показывало значок - для первого строка каждого дня и отображается только при добавлении новых / родных строк для каждого дня и скрывается снова, если эти новые / родные строки удаляются.

Я пытался показать / скрыть его на основе значения моего счетчика переменная (cloneIndex), но это ненадежно, потому что это общее количество для всех строк в форме, а не только для определенных c строк для рассматриваемого дня.

Answer 1

Как я уже упоминал в комментариях, я чувствую, что вам нужен родитель для каждого дня недели, поэтому я добавил time-interval-parent в разметку. Вам также необходимо переиндексировать массивы элементов name каждый раз, когда строка добавляется или удаляется, что требует добавления уникального класса для входных данных и выбора, чтобы их можно было найти в DOM. Вот скрипка , которую я собрал.

Эта функция берет идентификатор выбора (день недели) и использует его для атрибутов имени. Затем он изменяет атрибуты и добавляет индекс.

function setIndex(elements) {
    elements.each(function(index, element) {
    var day = $(element).closest(".row").find(".day").attr("id");
    $(element).find("select.from_hours").attr("name", "from_hours[" + day + "][" + index + "]");
    $(element).find("select.to_hours").attr("name", "to_hours[" + day + "][" + index + "]");
  });
}

Кнопка удаления изначально скрыта. Я добавил функциональность в вашу функцию clone, чтобы показать это. Затем в конце он передает все элементы в setIndex и запускает его.

В функции remove он снова запускает setIndex после удаления элемента, хотя вам не нужно делать это если он всегда удаляет последний элемент, потому что индексы не изменятся. Он также считает элементы и, если есть только один, он скрывает кнопку удаления. Надеюсь, это приблизит вас и покажет различные аспекты, необходимые для этого.

Answer 2

Вам даже не нужно JQuery, чтобы сделать это, просто используйте CSS, чтобы скрыть кнопку удаления на первом элементе. Это работает, сначала выбирая все элементы списка с классом .row, фильтрует их по первой из этих строк, затем находит дочерний элемент с классом .delete и скрывает его.

.row:first-of-type .delete {
  display: none;
}

<ul>
  <li class="row">
    first item
    <button class="delete"> - </button>
  </li>

  <li class="row">
    second item
    <button class="delete"> - </button>
  </li>

  <li class="row">
    third item
    <button class="delete"> - </button>
  </li>

  <li class="row">
    fourth item
    <button class="delete"> - </button>
  </li>
</ul>

Интересно, что вы можете использовать очень похожий синтаксис селектора в jQuery для выполнения той же операции (найти все строки, получить первую строку, найти удаление кнопку и скрыть, в противном случае показать это).