javascript - jQuery 遍历 DOM 元素并删除

Question

我有一些像这样的 HTML 元素

<input type="hidden" name="combos[0][pics][01]">
<input type="hidden" name="combos[0][pics][02]">
<input type="hidden" name="combos[1][pics][01]">
<input type="hidden" name="combos[1][pics][02]">
<input type="hidden" name="combos[2][pics][01]">
<input type="hidden" name="combos[2][pics][02]">

我如何使用 jquery 的 $.each 函数遍历这些并删除以 [pics][02] 结尾的每个 DOM 元素。

Answer 1

您可以使用以选择器 $= 结尾的选择器，完整的选择器可以像这样:

'input[type="hidden"][name$="[pics][02]'

而且你不需要循环:

$('input[type="hidden"][name$="[pics][02]').remove();

对选择器结果调用 remove() 函数将把它们全部删除。

注意:正如 @David Thomas 的评论所说，这可以使用纯 JS 来完成，例如:

 document.querySelectorAll('input[type=hidden][name$="[pics][02]"').forEach((el)=>el.remove());

console.log('Length BEFORE remove : ' + $('input[type="hidden"]').length);

$('input[type="hidden"][name$="[pics][02]').remove();

console.log('Length AFTER remove : ' + $('input[type="hidden"]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="hidden" name="combos[0][pics][01]">
<input type="hidden" name="combos[0][pics][02]">
<input type="hidden" name="combos[1][pics][01]">
<input type="hidden" name="combos[1][pics][02]">
<input type="hidden" name="combos[2][pics][01]">
<input type="hidden" name="combos[2][pics][02]">