How to add and remove div using jquery

Question

I am creating a scenario where a user can add a new line with the "Delete" option by clicking the "Add" button. If they click the Delete button, the entire line will be deleted. I put a script on it. But this does not work perfectly. Please take a look at my fiddle: http://jsfiddle.net/learner73/gS8u2/

My problem:

(1) If the user clicks the Add button, a new row will be added. It's good. But he dropped below the Add button. I want a new line to be added above the Add button, I mean that the Add button should always be at the bottom.

(2) In my code, if the user clicks the Delete button in a previously created line, the entire line will be deleted. It's good. But when they click the "Delete" button on the dynamically created line, nothing will happen!

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();
});

Answer 1

You need to use delegation delegation for the delete 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

In addition, you did not add the complete div block to match the other code you had. You left <div class="block">and added only the input and range.

Answer 2

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

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

Hopes for relaxation meet your needs. :)

the 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/ , .

$('.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();
});

Answer 3

:

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

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

Answer 4

- 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();
});