Question

I have just created add input field with <a id="add">Add</a> link button which is working fine.
and also created remove button which doesn’t work properly. I need to remove exact input field with <a class="remScnt">Remove</a> link button

$(document).ready(function() {
  var scntDiv = $('#add_words');
  var wordscount = 1;
  var i = $('.line').size() + 1;
  $('#add').click(function() {
    wordscount++;
    $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt">Remove</a></div>').appendTo(scntDiv);
    i++;
    return false;
  });
  Remove button
  $('.remScnt').click(function() {
    if (i > 1) {
      $(this).parents('.line').remove();
      i--;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a id="add">Add</a>
<div id="add_words">
  <div class="line">Word is 1
    <input type="text" value="1" />
  </div>
</div>

Answer 1

There are 2 problems in your code:

1. “remScnt” should be a class attribute and not an id.
2. Your click event is executed when the document is ready so your dynamic elements won’t have any event handler attached

I’ve created a working JSFiddle at http://jsfiddle.net/qQKFt/3/ for you to take a look at.