I have a <ul> tag that contain 2 <li> tag with a <p> tag that contain text:
<ul>
<li>List-item-1<p>para-1</p></li>
<li>List-item-2<p>para-2</p></li>
</ul>
I want to remove List-item-1 and List-item-2 from the code. I tried this:
$('li').each(function () {
$('li').html($('p'));
});
But I am getting output as below:
para-2
para-1
para-2
para-2
para-1
para-2
How do I get output with <p> tag only?
You can use find() function here.
$('ul li').html(function(){
return $(this).find('p');
});<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<ul>
<li>List-item-1<p>para-1</p></li>
<li>List-item-2<p>para-2</p></li>
</ul>You can replace innerText even without jQuery.
document.querySelectorAll('li').forEach(li => {
li.innerText = li.querySelector('p').innerText
})<ul>
<li>List-item-1<p>para-1</p></li>
<li>List-item-2<p>para-2</p></li>
</ul>You can also remove the text.
$('ul li').each((i,ele) => {
ele.firstChild.remove()
})<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<ul>
<li>List-item-1
<p>para-1</p>
</li>
<li>List-item-2
<p>para-2</p>
</li>
</ul>