Remove element from html using jQuery

Question

i am new to jQuery.

i have list element as follows.

<ul>
    <li>
        <a href="abc">ABC</a>
    </li>
    <li> <!-- I want to remove this element-->
        <ul>
            <li>
                <a href="def">DEF</a>
            </li>
            <li>
                <a href="ghi">GHI</a>
            </li>
        </ul>
    </li>
</ul>

i want to remove LI element (commented in above sample) which has GHI anchor tag using jQuery. or in other ways i want to remove that element based on the href property or text contained in the anchor tag.

Please help

adrian · Accepted Answer · 2012-01-21 03:46:46Z

3

$("ul:first > li:eq(1)").remove()

Select the first ul, then remove the second li child.

Or if you meant the li with GHI tag,

$("ul:eq(1) > li:eq(1)").remove()

Select the second ul, and find the second li child.

answered Jan 21, 2012 at 3:46

adrian

2,3864 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prateek Deshpande Over a year ago

Thanks, but it will not always be the case. i want to remove the element based on the text in anchor tag or href attribute of anchor tag.

Tadeck Over a year ago

@PrateekDeshpande: Based on this comment, I have added my answer - it removes <li> element containing anchor with href equal to "ghi".

Tadeck · Accepted Answer · 2012-01-21 13:12:27Z

2

To remove li element placed somewhere above the anchor with href="ghi" you could do something like this:

jQuery('a[href="ghi"]').parents('ul > li').remove();

or if li element that needs to be removed is not the direct child of the ul element (good point, mrtsherman):

jQuery('a[href="ghi"]').parents('ul li').remove();

See it in action: jsfiddle.net/tadeck/EmZ4N/

edited Jan 21, 2012 at 13:12

answered Jan 21, 2012 at 4:34

Tadeck

138k28 gold badges155 silver badges201 bronze badges

2 Comments

mrtsherman Over a year ago

I like this one the best. Most of the other answers provided are just wrong. There is the assumption that li being removed is a direct child of the ul, but OP didn't specify alternate cases.

Tadeck Over a year ago

@mrtsherman: Thanks, I have added the case when li we want to remove is not the direct child of ul.

daniel0mullins · Accepted Answer · 2012-01-21 04:40:31Z

1

If you want to remove li with certain href(s):

$('li > a[href^="abc"]').remove();

That is selecting all list items that contain anchors with hrefs that begin with "abc" and then removing them.

answered Jan 21, 2012 at 4:40

daniel0mullins

1,9595 gold badges22 silver badges47 bronze badges

Comments

Andrew Whitaker · Accepted Answer · 2012-01-21 22:13:25Z

1

$('a[href="ghi"]').closest('li').closest('li').remove();

edited Jan 21, 2012 at 22:13

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

answered Jan 21, 2012 at 4:50

eiu165

6,30110 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

Remove element from html using jQuery

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related