www.webdeveloper.com
Results 1 to 3 of 3

Thread: Add remove List item using javascript

  1. #1
    Join Date
    Sep 2009
    Posts
    1

    Add remove List item using javascript

    I have the following code. I am trying to add an item in the unorderedlist sing javascript when. the new list item is added when the checkbox is checked. And iam trying to remove the corresponding list item when the checkbox is unchecked. Is it possible? Any help from the web gurus will be greatly appretiated.

    Code:
    <html>
    <head>
         
        <title>Insert title here</title>
    
        <script type="text/javascript" language="JavaScript">
            function Addlistitem(list_id) {
    
                var chname = document.getElementById(list_id).name;
                if (document.getElementById(list_id).checked == true) {
    
    
                    var element = chname;
                    var container = document.getElementById('myList');
                    var new_element = document.createElement('li');
                    new_element.innerHTML = element;
                    container.insertBefore(new_element, container.firstChild);
                    document.getElementById('newElement').value = "";
                }
                else {
                    alert("its unchecked");
                    //need help here to delete the added list item when its corresponding checkbox is unchecked.
    
                }
    
    
    
            }
    
        </script>
    
    </head>
    <body>
        <form name="form1"/>
        <input type="checkbox" name="ch1" id="c1" onclick="JavaScript:Addlistitem('c1');"
            value="10" />
        <input type="checkbox" name="ch2" id="c2" onclick="JavaScript:Addlistitem('c2');"
            value="11" />
        <input type="checkbox" name="ch3" id="c3" onclick="JavaScript:Addlistitem('c3');"
            value="12" />
        <input type="checkbox" name="ch4" id="c4" onclick="JavaScript:Addlistitem('c4');"
            value="13" />
        <input type="checkbox" name="ch5" id="c5" onclick="JavaScript:Addlistitem('c5');"
            value="14" />
        <input type="checkbox" name="ch6" id="c6" onclick="JavaScript:Addlistitem('c6');"
            value="15" />
        <input type="checkbox" name="ch7" id="c7" onclick="JavaScript:Addlistitem('c7');"
            value="16" />
        <ul id="myList">
        </ul>
        </form>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Food For Thought

    I'm sure one of the JS gurus will help you out, but as food for thought, maybe consider an alternative method to hiding and displaying elements on a page, especially if the content is static (not database driven).

    I find it a lot easier, but that's just me, to code all the possible elements using html and then use a quick and simple javascript to change their display and/or visibility CSS styles to display or hide the elements.

    The JS to hide/show elements could be triggered by onclick events on check boxes, onchange events in text boxes or whatever.

    Imo programmitically creating and manipulating elements in JS can get messy.

    Anyway, just food for thought

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Smile

    Quote Originally Posted by tirna View Post
    Food For Thought

    I'm sure one of the JS gurus will help you out, but as food for thought, maybe consider an alternative method to hiding and displaying elements on a page, especially if the content is static (not database driven).

    I find it a lot easier, but that's just me, to code all the possible elements using html and then use a quick and simple javascript to change their display and/or visibility CSS styles to display or hide the elements.

    The JS to hide/show elements could be triggered by onclick events on check boxes, onchange events in text boxes or whatever.

    Imo programmitically creating and manipulating elements in JS can get messy.

    Anyway, just food for thought
    I would agree and can provide code if you decide to go in that direction.

    As a possibility, see: http://javascript.internet.com/forms...down-list.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles