javascript - 如何创建一个依赖于其父级的删除按钮并通过 jquery 在其上创建一个函数 remove()？
问题描述
我需要搜索它是一个查询还是多个。我不擅长 Javascript 或 Jquery，但是，该函数在一个或多个查询中的（加号按钮）和一个查询中的（删除按钮）都非常好，如果有多个搜索字段，则仅当它创建时有时被创造有时不被创造。我真的不知道发生了什么，但我注意到当我单击具有删除按钮的（加号按钮）时，它可以创建一个新的删除按钮，如果我单击没有按钮的父级中的加号按钮删除删除按钮不会创建。
有我的代码和屏幕截图可以看到错误，但请注意，我在 HTML 元素中执行 for-loop 到表单中以检索查询中存在的请求数以创建相同数量的搜索字段因此，我创建了按钮添加和删除除第一个字段外的搜索。
搜索.html
<div class="search-field">
<h2 class="show"></h2>
{% if query_length|length < 2 %}
<form method="get" id="main_search">
<div class="form-group row search_repeated search_group">
<div class="col-lg-2 d-inline p-2 word_repeated">
<label style="font-size: large; padding-top: 5px">Sentence or Word</label>
</div>
<!-- Filter -->
<div class="col-lg-2 d-inline p-2">
<select name="formsets_option" id="formsets_option" class="form-control">
{% if formsets_option == 'contains' %}
<option id="contains" value="contains" selected>contains</option>
{% else %}
<option id="contains" value="contains">contains</option>
{% endif %}
</select>
</div>
<div class="col-lg-4 d-inline p-2">
<input id="search_btn" type="text" class="form-control"
onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}"
placeholder="search" name="query" value="{{ request.GET.query }}">
</div>
<div class="col-lg-2 d-inline p-2">
<select name="verb_option" id="verb_option" class="form-control">
{% if verb_option == '' %}
<option value="" selected>Any POS</option>
{% else %}
<option value="">Any POS</option>
{% endif %}
</select>
</div>
<div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
<div class="fa fa-plus d-inline"></div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="submit" name="main_search" value="Search" class="btn btn-primary">
<a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
</div>
</div>
</form>
{% else %}
<form method="get" id="main_search">
{% for q, formsets_option, verb_option in multiple_requests %}
<div class="form-group row search_repeated search_group">
<div class="col-lg-2 d-inline p-2 word_repeated">
<label style="font-size: large; padding-top: 5px">Sentence or Word</label>
</div>
<!-- Filter -->
<div class="col-lg-2 d-inline p-2">
<select name="formsets_option" id="formsets_option" class="form-control">
{% if formsets_option == 'contains' %}
<option id="contains" value="contains" selected>contains</option>
{% else %}
<option id="contains" value="contains">contains</option>
{% endif %}
</select>
</div>
<div class="col-lg-4 d-inline p-2">
<input id="search_btn" type="text" class="form-control"
onkeyup="if (this.value != ''){document.getElementById('clear').hidden=false} else {document.getElementById('clear').hidden=true}"
placeholder="search" name="query" value="{{ q }}">
</div>
<div class="col-lg-2 d-inline p-2">
<select name="verb_option" id="verb_option" class="form-control">
{% if verb_option == '' %}
<option value="" selected>Any POS</option>
{% else %}
<option value="">Any POS</option>
{% endif %}
</select>
</div>
<div style="align-self: center;font-size: 14px;color: #2f855a;" class="btn-plus col-lg-1 d-inline">
<div class="fa fa-plus d-inline"></div>
</div>
</div>
{% endfor %}
<div class="out_search_group">
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="submit" name="main_search" value="Search" class="btn btn-primary">
<a href="{% url 'search:search' %}" style="color: #c53030; margin-left: 10px;border: 0; background-color: transparent;cursor: pointer" id="clear" hidden>Clear Search</a>
</div>
</div>
</form>
{% endif %}
</div>
搜索.html
<script type="text/javascript">
$(document).ready(function()
{
let search_group = $(".search_group")
let out_search_group = $(".out_search_group")
let create_times_parent = document.createElement("div")
create_times_parent.classList.add("btn-times", "col-lg-1", "d-inline")
let create_times = document.createElement("div")
//added on extra class here..
create_times.classList.add("fa", "fa-times", "d-inline", "remove")
create_times_parent.appendChild(create_times)
// field number just one field
if (search_group.length < 2 && search_group.length > 0)
{
$(document).on('click', '.btn-plus', function ()
{
$("div.search_group:first-of-type").after(search_group.clone(true, true));
search_group.addClass('created')
search_group.append(create_times_parent)
});
//onclick of remove..
$(document).on("click", ".remove", function ()
{
$(this).closest('.created').remove() //get closest outer div
console.log("clicked")
})
// field number more than one field
} else
{
search_group.not(":first").append(create_times_parent)
$(document).on('click', '.btn-plus', function ()
{
let search_cloned = $(this).parent('.search_repeated').clone(true, true);
$("div.out_search_group").append(search_cloned);
console.log("has cloned")
console.log(search_cloned)
search_cloned.addClass('created')
console.log("has class created")
console.log(search_cloned)
search_cloned.append(create_times_parent)
console.log("has times shape")
console.log(search_cloned)
});
//onclick of remove..
$(document).on("click", ".remove", function ()
{
$(this).closest('.created').remove() //get closest outer div
$(this).parent('.btn-times').parent('.search_repeated').remove()
console.log("clicked")
})
}
});
</script>
视图.py
我返回这个以使条件告诉我查询长度是否超过一
context = {'query_length': request.GET.getlist('query')}