Tengo una etiqueta <ul> que contiene 2 etiquetas <li> con una etiqueta <p> que contiene texto:
<ul> <li>List-item-1<p>para-1</p></li> <li>List-item-2<p>para-2</p></li> </ul> Quiero eliminar List-item-1 y List-item-2 del código. Intenté esto:
$('li').each(function () { $('li').html($('p')); });Pero obtengo la salida de la siguiente manera:
para-2
para-1
para-2
para-2
para-1
para-2
¿Cómo obtengo resultados solo con la etiqueta <p> ?
Puede usar la función find() aquí.
$('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>Puede reemplazar innerText incluso sin 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>También puede eliminar el texto.
$('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>