将 EventListener 函数添加到 Returns 父 ID 的按钮
Add EventListener Function to Button That Returns Parent ID
对于列表中的每个客户端,应用程序将以下 li 和元素添加到 ul。
btna 有一个事件侦听器,我想从 ul 中删除该客户端的完整 li。
function clientListEntry(client){
//HTML Elements
var clientEntry = document.createElement("LI");
var diva = document.createElement("div");
var divb = document.createElement("div");
var divc = document.createElement("div");
var divd = document.createElement("div");
var labela = document.createElement("label");
var inputa = document.createElement("checkbox");
var spana = document.createElement("span");
var btna = document.createElement("button");
//LI - ID and Class
clientEntry.id = client.userID;
clientEntry.classList.add("item_portion");
//Div classes and username
diva.classList.add("c_leftsection");
divb.classList.add("c_block");
divc.classList.add("c_midsection");
divc.innerText = client.name;
divd.classList.add("c_rightsection");
//Functionals classes
labela.classList.add("switch");
inputa.checked = true;
spana.classList.add("slider");
spana.classList.add("round");
btna.classList.add("c_remove");
btna.innerText = "-";
btna.addEventListener("click", function() {
document.removeChild(clientEntry);
}, false);
//Add to document
document.getElementById("tabs_client_list").appendChild(clientEntry);
clientEntry.appendChild(diva);
diva.appendChild(divb);
clientEntry.appendChild(divc);
clientEntry.appendChild(divd);
divd.appendChild(labela);
labela.appendChild(inputa);
inputa.appendChild(spana);
divd.appendChild(btna);
}
ul 看起来像这样:
<li id="c2" class="item_portion">
<div class="c_leftsection">
<div class="c_block"></div>
</div>
<div class="c_midsection">Jimmy</div>
<div class="c_rightsection">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<button class="c_remove" id="c_btn_remove">-</button>
</div>
</li>
最后,我想从列表中删除客户端以及基于 LI id 的 DOM 的另一个元素。
我想我需要的是将父 LIs id 传递给一个函数,但我不确定如何检索它。
我不是 100% 确定我是否理解你的问题。
如果我认为你想在按下按钮时删除父 LI,我说得对吗?
如果是,您可以将 parent-LI 的 ID 添加到按钮,如下所示:
<button class="c_remove" id="c_btn_remove" data-parent_id="add ID of LI here">-</button>
通过点击按钮,event-listener可以访问data-information。
或者您可以删除按钮的父项的父项(jQuery 示例):
$("#c_btn_remove").click(function(){
$(this).parent().parent().remove();
});
也许 closest 也可以:
$("#c_btn_remove").click(function(){
$(this).closest('li').remove();
});
对于列表中的每个客户端,应用程序将以下 li 和元素添加到 ul。
btna 有一个事件侦听器,我想从 ul 中删除该客户端的完整 li。
function clientListEntry(client){
//HTML Elements
var clientEntry = document.createElement("LI");
var diva = document.createElement("div");
var divb = document.createElement("div");
var divc = document.createElement("div");
var divd = document.createElement("div");
var labela = document.createElement("label");
var inputa = document.createElement("checkbox");
var spana = document.createElement("span");
var btna = document.createElement("button");
//LI - ID and Class
clientEntry.id = client.userID;
clientEntry.classList.add("item_portion");
//Div classes and username
diva.classList.add("c_leftsection");
divb.classList.add("c_block");
divc.classList.add("c_midsection");
divc.innerText = client.name;
divd.classList.add("c_rightsection");
//Functionals classes
labela.classList.add("switch");
inputa.checked = true;
spana.classList.add("slider");
spana.classList.add("round");
btna.classList.add("c_remove");
btna.innerText = "-";
btna.addEventListener("click", function() {
document.removeChild(clientEntry);
}, false);
//Add to document
document.getElementById("tabs_client_list").appendChild(clientEntry);
clientEntry.appendChild(diva);
diva.appendChild(divb);
clientEntry.appendChild(divc);
clientEntry.appendChild(divd);
divd.appendChild(labela);
labela.appendChild(inputa);
inputa.appendChild(spana);
divd.appendChild(btna);
}
ul 看起来像这样:
<li id="c2" class="item_portion">
<div class="c_leftsection">
<div class="c_block"></div>
</div>
<div class="c_midsection">Jimmy</div>
<div class="c_rightsection">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<button class="c_remove" id="c_btn_remove">-</button>
</div>
</li>
最后,我想从列表中删除客户端以及基于 LI id 的 DOM 的另一个元素。
我想我需要的是将父 LIs id 传递给一个函数,但我不确定如何检索它。
我不是 100% 确定我是否理解你的问题。 如果我认为你想在按下按钮时删除父 LI,我说得对吗?
如果是,您可以将 parent-LI 的 ID 添加到按钮,如下所示:
<button class="c_remove" id="c_btn_remove" data-parent_id="add ID of LI here">-</button>
通过点击按钮,event-listener可以访问data-information。
或者您可以删除按钮的父项的父项(jQuery 示例):
$("#c_btn_remove").click(function(){
$(this).parent().parent().remove();
});
也许 closest 也可以:
$("#c_btn_remove").click(function(){
$(this).closest('li').remove();
});