特定の条件に基づいてulの最後の要素を削除します

Question

liの中にたくさんのulリストがあります。さらに、入力タイプはliの下に隠れています。

liには表示されないように、ディスプレイ自体を動的に削除または設定したいと考えています。inputは自分の隣に隠しています。

どうすれば実現できますか？

$('#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

は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>

Answer 3

1. マークアップが間違っています。 LIはULの子のみです
2. 入力をliに入れます。
3. そして:has()

説明を使用：指定されたセレクタと一致する少なくとも一つの要素を含む要素を選択します。あなたは、ULの中にinputタグを使用しないでください

$('#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

。 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>