Javascript 如何删除jquery上附加的div

你好，我想删除克隆的html时，我点击这个，什么是最好的方式？如何检测它是我在X上点击的东西

这是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>

编辑1 结束已经结束了，所以我又加了一个，因为它仍然是相同的概念

当我选择Type=radio、select、checkbox和remove（如果不是），如何添加，然后将其放在标签输入下

目前我有

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

您正在使用重复id=close。使用class=close，如下所示

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

更新

两个简单的步骤：

靠近教室，靠近教室。您不应该复制ID。 向col-md-6容器添加一些类，以便以后能够选择它。您也可以使用col-md-6，但不希望将JS代码绑定到特定于布局的类 HTML变成：

<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>

---

您应该使用jQuery.closest从单击的按钮返回到包含所有面板的父容器

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

.clone字段是要删除的面板最上面的DIV

编辑：

---

另外，

在“x”的单击事件中，您需要找到父容器并使用。remove CommandId是单数，您需要使用classeshello我添加了new，如何附加base他选择On选项？您好，我添加了new，如何附加base他选择On选项？如果只有radio或select else removeyeah我选择radio时，它添加，然后选择，它再次添加新的，所以双重添加…这是什么结果？var panel=var inputs=$this.closest'.panel body'；，因为我有一个错误SyntaxError:expected expression，get关键字'var'nvm，刚刚删除了var inputs=并且它可以工作。。。谢谢兄弟

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

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

<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>

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

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