[英]How to remove appended div on jquery
Hello I want to remove the cloned html when I click this, what is the best way? 你好我想点击这个删除克隆的html,最好的方法是什么? how to detect that it's what I've clicked on X
如何检测这是我点击X
and this is the HTML 这是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
这就是我单击按钮+ 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, EDIT1关闭已经完成,所以我再添加一个,因为它仍然是相同的概念,
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
? 如何添加<input type="text" name="customform[option]" placeholder="Ex. Male,Female" />
当我选择Type
= radio,select,checkbox
并删除,如果不是,则将其置于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 EDIT2我添加了这个隐藏的输入文本
how to find closest into removeClass('hide')/addClass('hide') of my base on Type
= radio,select
如何在Type
= radio,select
上找到最接近removeClass('hide')/ addClass('hide')的基础radio,select
EDIT3 - MY TOTAL ANSWER 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');
}
});
Your are using duplicate id=close
. 你正在使用重复的id=close
。 Use class=close
instead like following. 使用class=close
代替如下。
<a class="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
And your js
for removing item should be like this. 你的移除物品的js
应该是这样的。
$('.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');
}
});
Two simple steps: 两个简单的步骤:
#close
to class .close
. 将#close
改为class .close
。 You should not duplicate ids. 你不应该重复ids。 col-md-6
container to be able to select it later. 将一些类添加到col-md-6
容器中以便以后可以选择它。 You could use col-md-6
too but you don't want to tie JS code to layout specific classes 您也可以使用col-md-6
但是您不希望将JS代码绑定到布局特定的类 HTML becomes: 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>
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();
});
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 您应该使用jQuery.closest() https://api.jquery.com/closest/从您单击的按钮移动到包含所有面板的父容器
$('#close').on('click', function(){
$(this).closest('.clone-field').remove();
});
.clone-field
is the top most DIV of the panel to delete .clone-field
是要删除的面板中最顶级的DIV
Edit: Also, Difference between id and class in CSS and when to use it 编辑:此外, CSS中的ID和类之间的区别以及何时使用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.