Question: ```
<body>
<div id="options">
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
</div>
<a href = "#" id ="click" >Add Option</a>
</body>

```

And：

```
$(function() {
$("#click").click(function add_option(){
    var options = document.getElementById("options");
    var p=document.createElement("p");
    p.setAttribute("class","input");
    var input=document.createElement("input");
    input.setAttribute("type","text")
    options.appendChild(p);
    p.appendChild(input);               
    var a=document.createElement("a");
    a.setAttribute("class","remove");

    var text = document.createTextNode(" Remove");
    a.appendChild(text);
    insertAfter(a,input);//if exist insertAfter
              }
              )

$(".remove").click(function remove_option(){

$(this).parent().remove();  
}) 
})

```

when i click `Add Option`,it works,but when i click the `remove` of the newly added,it doesn't remove .whether the $(".remove") selector have effects on it?(the initial two `remove` work).how to make the newly added elements work？

Answer: 
At the time you bind the event handler to the `.remove` elements, the new elements don't exist yet (obviously). That's why jQuery cannot find them and bind the event handler. 

You can solve this using [`.live` *[docs]*](http://api.jquery.com/live/) or [`.delegate` *[docs]*](http://api.jquery.com/delegate/):

```
$(".remove").live('click', function(){
    $(this).parent().remove();  
});

```

These methods bind the event handler to the document root and inspect every `click` event (in this case) and test whether the target matches the selector. If it does, the handler is executed.

---

I also would advise you to not mix plain DOM operations and jQuery like that. Your `click` event handler can be written in a more concise way:

```
$("#click").click(function(){
    $('<p />', {'class': 'input'})
      .append($('<input />', {type: 'text'})
      .append($('<a />', {'class': 'remove', href: '#', text: 'Remove'})
      .appendTo('#options');
});

```

There are exceptions, like accessing properties of DOM elements, but here you really should make use of jQuery.
This works: <http://jsfiddle.net/UJERQ/>

```
$("#click").click(function add_option(){

    $("#options").append('<p class="input"><input type="text"/><a class="remove" > Remove</a></p>')

    addTheClicks();
})

    function addTheClicks(){
       var btns = $(".remove");
       var btnsLength = btns.length;

        for(i=0;i<btnsLength;i++){
         var hasClickAlready =  $.data(btns.eq(i).get(0), 'events' );
            if(hasClickAlready == null){
                btns.eq(i).click(function(){
                    $(this).parent().remove()
                        })
            }
        }

    }

addTheClicks();

```