SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    removing an item from <UL> by string

    Hai folks,

    i have spend lot of time finding how to remove and item from a UL. no luck.
    please help me to remove 'orange' from below list. but not using the position / index of Orange. just by finding the string 'orange' by loop through.

    <ul>
    <li>mango</li>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
    </ul>

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Do you want to remove the word, the whole list item, or replace orange with some other text?
    Ryan B | My Blog | Twitter

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by afridy View Post
    i have spend lot of time finding how to remove and item from a UL. no luck.
    please help me to remove 'orange' from below list. but not using the position / index of Orange. just by finding the string 'orange' by loop through.

    <ul>
    <li>mango</li>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
    </ul>
    Let's put an identifier on that UL element, so we can gain easy access to it from a script.

    Code javascript:
    <ul id="fruits">
        <li>mango</li>
        <li>apple</li>
        <li>orange</li>
        <li>banana</li>
    </ul>

    Now we can just loop through each of the items, removing any that match.

    Code javascript:
    var fruitToRemove = 'orange',
        fruits = document.getElementById('fruits'),
        items = fruits.getElementsByTagName('li'),
        i;
    for (i = items.length - 1; i >= 0; i -= 1) {
        if (items[i].innerHTML === fruitToRemove) {
            items[i].parentNode.removeChild(items[i]);
        }
    }

    Why we go backwards through them is that removing an item from the list then doesn't change the index numbers of the items that have not yet been processed, so multiple matching items can then be removed without causing problems.

    Code javascript:
    <ul id="fruits">
        <li>mango</li>
        <li>apple</li>
        <li>orange</li>
        <li>orange</li>
        <li>banana</li>
    </ul>

    A forward loop through the above would not remove the second orange, because once the first one is removed everything else below it moves up, so extra trickiness needs to occur to cater for that. To remove the need for such extra trickiness, the standard technique is to work through node lists in reverse, especially if any changes will be made to them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    Do you want to remove the word, the whole list item, or replace orange with some other text?
    Hai rguy, thanks for ur intrest in my question. any way its answerd now

  5. #5
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Let's put an identifier on that UL element, so we can gain easy access to it from a script.

    Code javascript:
    <ul id="fruits">
        <li>mango</li>
        <li>apple</li>
        <li>orange</li>
        <li>banana</li>
    </ul>

    Now we can just loop through each of the items, removing any that match.

    Code javascript:
    var fruitToRemove = 'orange',
        fruits = document.getElementById('fruits'),
        items = fruits.getElementsByTagName('li'),
        i;
    for (i = items.length - 1; i >= 0; i -= 1) {
        if (items[i].innerHTML === fruitToRemove) {
            items[i].parentNode.removeChild(items[i]);
        }
    }

    Why we go backwards through them is that removing an item from the list then doesn't change the index numbers of the items that have not yet been processed, so multiple matching items can then be removed without causing problems.

    Code javascript:
    <ul id="fruits">
        <li>mango</li>
        <li>apple</li>
        <li>orange</li>
        <li>orange</li>
        <li>banana</li>
    </ul>

    A forward loop through the above would not remove the second orange, because once the first one is removed everything else below it moves up, so extra trickiness needs to occur to cater for that. To remove the need for such extra trickiness, the standard technique is to work through node lists in reverse, especially if any changes will be made to them.
    Hai paul,
    works charm! what a relief !!!
    thanks for the step by step guide.really appreciated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •