How to remove appended div on jquery

Question

Hello I want to remove the cloned html when I click this, what is the best way? how to detect that it's what I've clicked on X

and this is the HTML

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Fields</h4>
        </div>
        <div class="panel-body">
            <div class="field">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            <a id="close" class="pull-right" href="#">
                              <i class="fa fa-times"></i>
                            </a>
                        </div>
                        <div class="panel-body">
                            <select class="form-control" name="custom_form[type]" required>
                                <option value="">Type</option>
                                <option>text</option>
                                <option>textarea</option>
                                <option>radio</option>
                                <option>checkbox</option>
                            </select>
                            <input class="form-control" type="text" name="customform[label]" placeholder="Label" />
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" id="add_attribute" class="btn btn-default">+ Add attribute</a>

        </div>
    </div>
</div>

and this is what I've used to clone the fields when I click the button + Add Attribute

<div class="clone-field hide">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <a id="close" class="pull-right" href="#">
                  <i class="fa fa-times"></i>
                </a>
            </div>
            <div class="panel-body">
                <select class="form-control" name="custom_form[type]" required>
                    <option value="">Type</option>
                    <option>text</option>
                    <option>textarea</option>
                    <option>radio</option>
                    <option>checkbox</option>
                </select>
                <input class="form-control" type="text" name="customform[question]" placeholder="Question" />
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(".container").on("click", "#add_attribute", function(e){
        e.stopPropagation();
        e.preventDefault();

        alert("ok");
        var append_att = $(".clone-field").html();

        $(".field").append(append_att);
    });
</script>

EDIT1 the close is already done, so I added one more since it's still same concept,

How to add <input type="text" name="customform[option]" placeholder="Ex. Male,Female" /> when I select Type = radio,select,checkbox and remove if it's not, then put it under on the Label input?

currently I have

$(".container").on("click", "#add_attribute", function(e){
    e.stopPropagation();
    e.preventDefault();

    var append_att = $(".clone-field").html();

    $(".fields").append(append_att);
}).on('click', '.remove', function() {
    $(this).closest('.field').remove();
}).on('change', '.field-type', function(){
    var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
    var valueSelected = this.value;

    if(valueSelected == 'radio' || valueSelected == 'select')
        //append
    else
        //remove
});

EDIT2 I've added this hidden input text

how to find closest into removeClass('hide')/addClass('hide') of my base on Type = radio,select

EDIT3 - MY TOTAL ANSWER

$(".container").on("click", "#add_attribute", function(e){
    e.stopPropagation();
    e.preventDefault();

    var append_att = $(".clone-field").html();

    $(".fields").append(append_att);
}).on('click', '.remove', function() {
    $(this).closest('.field').remove();
}).on('change', '.field-type', function(){
    var inputType = this.value;
    var panel = $(this).closest('.panel-body');

    var inputs = panel.find('input');
    inputs.last().val("");

    if(inputType=='radio' || inputType=='select') {
        inputs.last().removeClass('hide');
    } else {
        inputs.last().addClass('hide');
    }
});

Answer 1

Your are using duplicate id=close. Use class=close instead like following.

<a class="close" class="pull-right" href="#">
    <i class="fa fa-times"></i>
</a>

And your js for removing item should be like this.

$('.container').on('click', '.close', function(){
    $(this).closest('.col-md-6').remove();
});

Update

$('.container').on('click', 'select.form-control', function () {
    var input_type = this.value;
    var panel = $(this).closest('.panel-body');

    var inputs = panel.find('input');


    if (input_type == 'radio' || input_type == 'select') {
        if (inputs.length > 1) {
            inputs.last().removeClass('hide');
        }
        else {
            var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
            panel.append(input_option);
        }
    } else {
        if (inputs.length > 1)
            inputs.last().addClass('hide');
    }
});

Answer 2

You should use jQuery.closest() https://api.jquery.com/closest/ to travel from the button you clicked back to the parent container that holds all the panel

$('#close').on('click', function(){
    $(this).closest('.clone-field').remove();
});

.clone-field is the top most DIV of the panel to delete

Edit: Also, Difference between id and class in CSS and when to use it

Answer 3

Two simple steps:

• change #close to class .close. You should not duplicate ids.
• add some class to col-md-6 container to be able to select it later. You could use col-md-6 too but you don't want to tie JS code to layout specific classes

HTML becomes:

<div class="clone-field hide">
    <div class="block col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <a class="close" class="pull-right" href="#">
                  <i class="fa fa-times"></i>
                </a>
            </div>
            <div class="panel-body">
                <select class="form-control" name="custom_form[type]" required>
                    <option value="">Type</option>
                    <option>text</option>
                    <option>textarea</option>
                    <option>radio</option>
                    <option>checkbox</option>
                </select>
                <input class="form-control" type="text" name="customform[question]" placeholder="Question" />
            </div>
        </div>
    </div>
</div>

Then you also need to add once more click handler similar to what you already have:

$(".container").on("click", "#add_attribute", function(e){
    e.stopPropagation();
    e.preventDefault();

    alert("ok");
    var append_att = $(".clone-field").html();

    $(".field").append(append_att);
})
.on('click', 'close', function() {
    $(this).closest('.block').remove();
});