tengo este siguiente código html
<ui id="fruits"> <li>apple</li> <li>orange</li> <li>banana</li> <li>lemon</li> <li>melon</li> </ui>
ahora la pregunta es: ¿hay alguna función en jquery como $("#furits").removeElement("apple")
para eliminar un elemento por contexto?
Probé la función de eliminación en jquery, sin embargo, solo puede eliminar elementos por clase, id, nombre, etc., pero quiero eliminar un elemento por contexto.
gracias.
Para lograr su objetivo, puede usar una combinación de :contains
y remove()
, como esta:
$('#fruits li:contains("apple")').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ui id="fruits"> <li>apple</li> <li>orange</li> <li>banana</li> <li>lemon</li> <li>melon</li> </ui>
Vale la pena señalar que :contains
es una coincidencia codiciosa y también distingue entre mayúsculas y minúsculas. Esto significa que Apple
no coincidiría con apple
, sino con Crab Apple
, por ejemplo.
Si necesita una coincidencia exacta , puede usar filter()
en su lugar:
let search = 'apple'; $('#fruits li').filter((i, el) => el.textContent.trim() === search).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ui id="fruits"> <li>apple</li> <li>orange</li> <li>banana</li> <li>lemon</li> <li>melon</li> </ui>
No que yo sepa. Necesitaría iterar a través de los niños y comparar valores.
$('#fruits li').each(function(){ if ($(this).text() === 'apple') { $(this).remove(); } });
Creo que esto podría ayudar
$("#fruits li").remove( ":contains('apple')" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ui id="fruits"> <li>apple</li> <li>orange</li> <li>banana</li> <li>lemon</li> <li>melon</li> </ui>