I need to remove a list item from the DOM using jQuery

Posted on 2011-10-13
Last Modified: 2012-05-12
I have the HTML variable and have validate it does in fact have duplicate error messages. I need to remove duplicates. I need to remove the duplicate list item (li) from the ul in the DOM using jQuery or JavaScript .

How do I do that?

Question by:newbieweb
    LVL 11

    Assisted Solution

    by:Kusala Wijayasena
    LVL 12

    Accepted Solution

    It's one thing to remove a list item.  It's another to remove duplicates.

    I can't say that this is the best or most efficient way, but I would tackle this like

    <ul id="errors">
    <script type="text/javascript">
    $(document).ready(function() {
        var $ul = $('#errors');
        var items = {};    // empty object
        $ul.find('li').each(function() {
            var msg = $(this).text();
            items[msg] = 1;
            });        // now you have an empty <ul> and an object with unique keys
        for (i in items) {

    Open in new window

    LVL 40

    Assisted Solution

    LVL 40

    Assisted Solution


    Assisted Solution

    if dublicate variable(s) are even or odd ordered -assuming even- you can try;

    for better explanation you of remove() function have a look at:

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now