[英]How to remove appended div on jquery
你好我想點擊這個刪除克隆的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
});
如何在Type
= radio,select
上找到最接近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');
}
});
你正在使用重復的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');
}
});
兩個簡單的步驟:
#close
改為class .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();
});
您應該使用jQuery.closest() https://api.jquery.com/closest/從您單擊的按鈕移動到包含所有面板的父容器
$('#close').on('click', function(){
$(this).closest('.clone-field').remove();
});
.clone-field
是要刪除的面板中最頂級的DIV
編輯:此外, CSS中的ID和類之間的區別以及何時使用它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.