I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: /

My problem is:

(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.

(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!

HTML:

<div class="optionBox">
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <span class="add">Add Option</span>
    </div>
</div>

jQuery:

$('.add').click(function() {
    $('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});

$('.remove').click(function() {
    $(this).parent('div').remove();
});

I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: http://jsfiddle.net/learner73/gS8u2/

My problem is:

(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.

(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!

HTML:

<div class="optionBox">
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <span class="add">Add Option</span>
    </div>
</div>

jQuery:

$('.add').click(function() {
    $('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});

$('.remove').click(function() {
    $(this).parent('div').remove();
});

• javascript
• jquery
• css

• 2 As you're learning, an important skill to pick up is how to search Google (and using it to search documentation) and get the results you need. I am not saying this to be snarky, but as genuine advice. In this case, the words "insert" and "before" in a Google search along with "jQuery" would give you hundreds of solutions to your direct question. Whenever you get stuck, stop, Google, try, THEN ask as a last resort. Put the burden on YOU to come up with the solution first. Doing so will help you learn and grow as a developer -- just asking here might get an answer, but it actually set you back. – Chris Baker Commented May 5, 2014 at 21:17

4 Answers 4

You need to use event delegation on your remove link code:

$('.add').click(function() {
    $('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
    $(this).parent().remove();
});

jsFiddle example

Also, you weren't adding a complete div block to match the other code you had. You left out the <div class="block"> and only added the input and span.

Demo http://jsfiddle.net/34Lbu/

API: .before https://api.jquery.com/before/

Hope rest fits your need :)

code

$('.add').click(function () {
    $(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});

$(document).on('click', '.remove', function () {
    $(this).parent('div').remove();
});

EDIT http://jsfiddle.net/amdzakir/gS8u2/38/ To check if all the input fields are filled with values.

$('.add').click(function() {
    flag = true;
    $('input').css('border-color','green');
    $('input').each(function(){
        if ($.trim($(this).val())===''){
            $(this).css('border-color','red');
            flag = false;
        }
    });
    if(flag){
    $(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
    }
});
$(document).on('click','.remove',function() {
    $(this).parent().remove();
});

try this:

$('.remove').click(function() {
$(this).closest('div').remove();
 });

$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove    Option</span>');
  });

Here is one way - http://jsfiddle.net/gS8u2/3/

$('.add').click(function () {
    $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});

$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
    $(this).parent('.block').remove();
});