-2
<ol>
    <li>Sales</li>
    <ol>
        <li>North</li>
        <li>South</li>
    </ol>
    <li>Support</li>
    <ol>
        <li>Pc</li>
        <li>Mac</li>
    </ol>
    <li>Accounts</li>
</ol>


   1.  Sales
         1. North
         2. South
   2. Support
         1. Pc
         2. Mac
   3. Accounts

Can someone suggest a way to construct, add and remove elements from an ordered list from a web page. Also I am looking for the list name to be editable as well

veccy
  • 925
  • 3
  • 12
  • 20
  • Are you using any libraries like jQuery, or do you want to do this via pure JavaScript? – Brian Hoover Apr 19 '12 at 17:33
  • I would want to do it in jquery. I am new to jquery and am looking for direction so any suggestions appreciated – veccy Apr 19 '12 at 17:36
  • You might want to look at http://stackoverflow.com/questions/1145208/jquery-how-to-add-li-in-an-existing-ul – Brian Hoover Apr 19 '12 at 17:40
  • If you want to use jQuery, I suggest you have a read through the basic tutorial here first: http://docs.jquery.com/Tutorials:How_jQuery_Works. And then, for your query, have a look at the examples here: http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery. There are many many more tutorials you can find online which will help you solve your problem. Try searching for "DOM manipulation". – Armatus Apr 19 '12 at 17:41

1 Answers1

2

Here is a fiddle showing how to add an element to the list and remove an item. http://jsfiddle.net/7QrvV/

<ol id="main_ol">
    <li>Sales</li>
    <ol>
        <li>North</li>
        <li>South</li>
    </ol>
    <li>Support</li>
    <ol>
        <li>Pc</li>
        <li>Mac</li>
    </ol>
    <li>Accounts</li>
</ol>​

//add to the end of the list
$('#main_ol').append('<li>a</li>');

//remove support list item
$('#main_ol li:eq(3)').remove();
user1289347
  • 2,397
  • 1
  • 13
  • 16
  • 3
    If you're going to post a solution, please post the code here so it can be of use to future readers in case your jsFiddle link ever breaks. –  Apr 19 '12 at 17:46