How to show <p> tag in <ul> tag?-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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>