'How to show <p> tag in <ul> tag?

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

para-2

para-1

para-2

  • para-1

para-2

para-1

para-2

How do I get output with <p> tag only?

javascripthtmljquerycss


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sumit Sharma
Solution 2 Jax-p
Solution 3 mplungjan

Related Questions