根据特定条件删除 ul 中的最后一个元素

Question

我有一个ul列表，里面有很多li，而且我有一个隐藏在几个li下的输入类型。

我想删除或设置显示无动态到那些旁边没有任何隐藏inputli。

我怎样才能做到这一点？

这是我的片段：

$('#q li:last-child').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

Answer 1

您可以遍历li并检查它旁边是否有输入，如果没有，则隐藏它。 像这样：

$('#q li').each(function(){
if(!$(this).next('input').length)
$(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

Answer 2

你不应该在ul中使用输入标签。HTML 格式不正确！

$(document).ready(() => {
setTimeout(()=>{
a = $("#q").find("li").last().remove();
$("#output").html(a)
}, 2000)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>
Removed element <div id="output"> - </div>

Answer 3

1. 标记是错误的。李是UL的独生子
2. 将输入放在 li 中。
3. 然后使用 ：has((

说明：选择至少包含一个与指定选择器匹配的元素的元素。

$('#q li:not(:has(input))').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a>
<input type="hidden" value="1" class="page" />
</li>

<li><a class="PageNumber" data-href="home.htm">2</a>

<input type="hidden" value="2" class="page" />
</li>

<li><a class="PageNumber" data-href="home.htm">3</a></li>
</ul>

Answer 4

这是一个JS解决方案。

const list = document.getElementById('q').children
for (let i = 0; i < list.length; i++) {
if (list[i].tagName === 'LI') {
if (list[i+1] === undefined || list[i+1].tagName !== 'INPUT') {
list[i].style.display = 'none'
}
}
}

<ul id="q">
<li><a class="PageNumber" data-href="home.htm">1</a></li>
<input type="hidden" value="1" class="page" />
<li><a class="PageNumber" data-href="home.htm">2</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">3</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">4</a></li>
<input type="hidden" value="2" class="page" />
<li><a class="PageNumber" data-href="home.htm">5</a></li>
<li><a class="PageNumber" data-href="home.htm">6</a></li>
</ul>