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>

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

如何在我选择<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
});

EDIT2 我添加了这个隐藏的输入文本

如何在Type = radio,select

找到最接近我的基地的removeClass（'hide'）/ addClass（'hide'）

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

Answer 2

两个简单的步骤：

将#close更改为班级.close。你不应该重复ids。
将一些类添加到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>

然后你还需要再添加一次类似于你现有的点击处理程序：

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

Answer 3

你应该使用jQuery.closest（）https://api.jquery.com/closest/从你点击的按钮移动到包含所有面板的父容器

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

.clone-field是要删除的面板中最顶级的DIV

编辑：另外，Difference between id and class in CSS and when to use it

如何在jquery上删除附加的div

3 个答案: