javascript - 如何删除jquery上附加的div

Question

您好，我想在单击此按钮时删除克隆的 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>

这就是我在单击 + 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>

编辑1关闭已经完成，所以我又添加了一个，因为它仍然是相同的概念，

如何添加<input type="text" name="customform[option]" placeholder="Ex. Male,Female" />当我选择 Type = radio,select,checkbox如果不是，则将其删除，然后将其放在 Label input 下？

目前我有

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

编辑2我添加了这个隐藏的输入文本

如何在 Type 上找到最接近我的基础的 removeClass('hide')/addClass('hide') = radio,select

EDIT3 - 我的完整答案

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

您正在使用重复的 id=close。使用 class=close 而不是像下面这样。

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

你的用于删除项目的 js 应该是这样的。

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