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

在@ User863的答案的帮助下，我发现了prevUntil()，它的实现方式如下：

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

Answer 3

这应使用提供的HTML删除隐藏的输入字段：

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

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

Answer 4

这可以通过以下方式完成：

使用data BT a b = Leaf | Branch (BT a b) a b (BT a b)
使用closest()
使用prevAll(<selector>)将先前匹配的元素与初始选择器堆栈（即 .tag 元素）合并
addBack()他们

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;
}

注意：出于视觉目的，该示例使用“文本”代替“隐藏”输入。只需更改类型，然后将'：hidden'伪选择器添加到您的prevAll选择器（例如<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>）

jQuery-删除以前的隐藏输入

4 个答案: