Remove element when it has a specified child element

Question

How can I delete list element if it has a child link of some defined id ? So looking at the code below I'd like to find a <li> with <a> of id=link1 and delete this li.

<li class="nav-tab">
    <a href="#link1">Component</a>
</li>

I've tried the code below but it doesn't work :

 $(function() {
     $('.nav-tab:has(#link1)').css('display', 'none');
 }); 

Answer 1

$(function() {
     $(".nav-tab > a[id='yourID']").css('display', 'none');
 }); 

If by anchor :

$(function() {
     $(".nav-tab > a[href='yourLink']").css('display', 'none');
 }); 

Answer 2

Your question and your code contradict each other, so I'll provide answers for both cases.

If you want to remove a <li class="nav-tab"> that contains a child <a href="#link1">:

$(function() {
    $('a[href="#link1"]').parent('li.nav-tab').remove();
});

If you want to remove a <li class="nav-tab"> that contains a child <a id="link1">:

$(function() {
    $('a#link1').parent('li.nav-tab').remove();
});

Answer 3

You can use an attribute-equals selector and :has() to see if it contains an element matching that...then just call .remove() on that.

$("li:has(a[href='#link1'])").remove()