#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    4
    Rep Power
    0

    Add dynamically element to list and then remove it


    I want to remove the added element (adding by append button) in an ordered list (ie. onclick that particular list item should removed) but unable to access the list items specifically can anyone please help me in this
    Here is my code :

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    
      $("#btn2").click(function(){
        $("#ol1").append("<li>Appended item</li>");
      });
      $("li").click(function(){
    
         $(this).hide();})
    });
    </script>
    </head>
    
    <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol id="ol1"></ol>
    <input type="button" id="btn2" value="append" />
    </body>
    </html>
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    4
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    
      $("#btn2").click(function(){
        $("#ol1").append("<li>Appended item</li>");
      });
    
      $( "#ol1" ).on( "click", "li", function() {
         $(this).hide();})
      });
    </script>
    </head>
    
    <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol id="ol1"></ol>
    <input type="button" id="btn2" value="append" />
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo