Highlight comment and remove class when delete button is clicked

Question

I am new to web development and currently learning jQuery from codecademy.

I made a simple opinion pull.

Problem: Besides add comment, i would like to delete the comment when i highlight the comment and 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 your 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);

Answer 1

I have created a fiddle to provide something close to the desired functionality. I'm not sure what you mean by "highlight" the comment, but what you are looking for is event delegation. Using jQuery's .on() function, you can listen for events on dynamically created elements:

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

See this jsFiddle: http://jsfiddle.net/voveson/5gL44z6m/2/

And for more info on how the .on() function works, see here .

Highlight comment and remove class when delete button is clicked

Question

1 answers

solution1
1 ACCPTED 2015-06-03 04:38:41

Highlight comment and remove class when delete button is clicked

Question

1 answers

solution1 1 ACCPTED 2015-06-03 04:38:41

solution1
1 ACCPTED 2015-06-03 04:38:41