javascript - Highlight comment and remove class when delete button is clicked -


i new web development , learning jquery codecademy.

i made simple opinion pull.

problem: besides add comment, delete comment when highlight comment , press trash button.

index.html

<!doctype html> <html>     <head>         <!--boostrap css stylesheet-->         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">         <!--jquery script-->         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>         <!--bootsrap js-->         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>         <!--css stylesheet-->         <link href="index.css" media="screen" rel="stylesheet" type="text/css">      </head>   <body>     <div class="container">       <form>         <div class="form-group">           <textarea class="form-control status-box" rows="2" placeholder="what's on mind?"></textarea>         </div>       </form>       <div class="button-group pull-right">         <p class="counter">140</p>         <a href="#" class="btn btn-primary" id="btnpost"><div class= "glyphicon glyphicon-pencil" ></div></a>         <a href="#" class="btn btn-primary" id="btndelete"><div class= "glyphicon glyphicon-trash" ></div></a>       </div>        <ul class="posts">       </ul>     </div>          <!--javascript script-->         <script src="index.js"></script>    </body> </html> 

index.css

html,body {   font-family: courier, sans-serif;   color: #404040;   background-color: #eee; }  .container {   width: 520px;   margin-top: 20px; }  .button-group {   margin-bottom: 20px;   padding: 5px; }  .counter {   display: inline;   margin-top: 0;   margin-bottom: 0;   margin-right: 10px; }  .posts {   clear: both;   list-style: none;   padding-left: 0;   width: 100%; }  .posts li {   background-color: #fff;   border: 1px solid #d8d8d8;   padding-top: 10px;   padding-left: 20px;   padding-right: 20px;   padding-bottom: 10px;   margin-bottom: 10px;   word-wrap: break-word;   min-height: 42px; } 

index.js

var main = function() { //btnpost   $('#btnpost').click(function() {     var post = $('.status-box').val();     $('<li>').text(post).prependto('.posts');     $('.status-box').val('');     $('.counter').text('140');     $('#btnpost').addclass('disabled');    });    $('.status-box').keyup(function() {     var postlength = $(this).val().length;     var charactersleft = 140 - postlength;     $('.counter').text(charactersleft);      if(charactersleft < 0) {       $('#btnpost').addclass('disabled');      }     else if(charactersleft == 140) {       $('#btnpost').addclass('disabled');     }     else {       $('#btnpost').removeclass('disabled');     }   });    $('#btnpost').addclass('disabled');   //btndelete   $('#btndelete').click(function(){    }); }  $(document).ready(main); 

i have created fiddle provide close desired functionality. i'm not sure mean "highlight" comment, looking event delegation. using jquery's .on() function, can listen events on dynamically created elements:

$('body').on('click', '.btndelete', function(){     $(this).closest('li').remove(); }); 

see jsfiddle: http://jsfiddle.net/voveson/5gl44z6m/2/

and more info on how .on() function works, see here.


Comments