JQuery - удалить предыдущие скрытые входы

Question

приведенный ниже код генерируется динамически и состоит из трех скрытых входов и тега span. Их может быть несколько.

<input type="hidden" name="activeTime[]" value="11:30" />
<input type="hidden" name="activeVenp[]" value="10" />
<input type="hidden" name="activeArtp[]" value="20" />
<span class="tag">11:30
  <a class="tag-addon removeActive"><i class="fe fe-x"></i></a>
</span>

Я хочу иметь возможность удалить весь этот код при нажатии a.removeActive. До сих пор я пробовал это:

$("#activeReadingsDisplay").on("click", ".removeActive", function(){
    $(this).parent().slice(-3).remove();
    $(this).parent().remove();
});

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

Answer 1

Использование prevAll()

$("#activeReadingsDisplay").on("click", ".removeActive", function() {
  $(this).parent('span').prevAll('input:hidden').remove();
  $(this).parent('span').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="activeReadingsDisplay">
  <input type="hidden" name="activeTime[]" value="11:30" />
  <input type="hidden" name="activeVenp[]" value="10" />
  <input type="hidden" name="activeArtp[]" value="20" />
  <span class="tag">11:30
    <a class="tag-addon removeActive">
      X
    </a>
  </span>
</div>

Answer 2

Это может быть достигнуто путем:

1. доступа к элементу на том же уровне скрытых входов с помощью closest()
2. извлечения всех требуемых предшествующих элементов с использованием prevAll(<selector>)
3. используйте addBack() для объединения предыдущих совпадений элементов с начальным стеком селектора (т. Е. Элемент .tag )
4. remove() их

$(document).ready(function() {

  $('#activeReadingsDisplay').on('click', '.removeActive', function() {
    $(this).closest('.tag').prevAll('input').addBack().remove();
  });

});

.tag {
  border: 1px solid;
  padding: .25rem;
}
.tag-addon {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="activeReadingsDisplay">
  <input type="text" name="activeTime[]" value="11:30" />
  <input type="text" name="activeVenp[]" value="10" />
  <input type="text" name="activeArtp[]" value="20" />
  <span class="tag">
    11:30
    <a class="tag-addon removeActive">
      <i class="fe fe-x">X</i>
    </a>
  </span>
</div>

Примечание: в качестве примера в примере используется «текст» вместо «скрытых» входов. Просто измените тип назад и добавьте псевдоселектор «: hidden» в ваш предыдущий селектор (например, prevAll('input:hidden'))

Answer 3

Это должно удалить скрытые поля ввода с предоставленным HTML:

function removeHiddenInput() {
    $(this).parent().prevAll('input[type=hidden]').remove();
}

$('.removeActive').on('click', removeHiddenInput);

Answer 4

С помощью ответа @ User863 я обнаружил prevUntil(), который я реализовал так:

$(this).parent().prevUntil('span').remove();