我有两个数组：
codes=[code1, code2, code3];
quantities=[23, 67, 87];
和这个HTML
<div id='cart_body'></div>
和这个脚本
Delete=function(){
}
document.getElementById('cart_body').innerHTML='';
cart_text='';
emp='<div class="close_button" onClick='Delete()'>x</div>';
open_span='<span class="close_span ">';
close_span='</span>';
elf='<br class="none"/>';
for(i=0; i<product_codes.length; i++){
//the two lines directly below this line are actually one continuous line
cart_text+=(open_span+codes[i]+"
(x"+quantities[i]+")"+close_span+emp+elf);
}
document.getElementById('cart_body').innerHTML=cart_text;
和这个css：
.close_button{
display: inline-block;
background-color: grey;
height: 12px;
width: 12px;
border-radius: 6px;
}
span{
display: inline-block;
}
此脚本的目的是编写文本行。每行有一个代码，一个数量，以及一个div。 div也有一些造型进入圆形按钮，但这一点是无关紧要的。
我的问题是：我可以写什么，以便删除函数可以检测类“close_button”中哪个div触发了该函数？
基于此，该函数需要删除该行文本（包含被点击的div的行，代码和数量），以及从他们删除这两个项目（代码和数量）各自的阵列。
我该怎么做？
如果我不够清楚，请随意问：）
感谢您的帮助！
P.S。 （特别感谢工作小提琴的答案）; - ）
P.P.S。请定期使用JavaScript。没有图书馆或框架。
**即将到来的小提琴
点击单击我的按钮。在实际的代码中，我不知道数组中会有多少项，但每个项中的数量都相同。就像我说的那样，我点击了任何一个小的圆形按钮，当它被点击时，删除它自己和同一行上的所有文本，以及该行上文本所代表的数组中的项目。
答案 0 :(得分：0)
该函数可以更好地命名为 deleteDiv ，或者更通常地命名为 deleteElement ，可以用来删除任何元素。
您可以使用 this 传递对调用侦听器的元素的引用：
emp = '<div class="close_button" onClick="deleteElement(this)">x</div>';
那么函数可以是：
function deleteElement(el) {
el.parentNode.removeChild(el);
}
答案 1 :(得分：0)
我可以写什么，以便删除功能可以检测类“close_button”中哪个div触发了该功能？
为此，我首先建议将每个元素放在<div>而不是<span>和单独的<div>中。然后我们可以删除父级：
cart_text+= "<div>"+(open_span+codes[i]+" (x"+quantities[i]+")"+close_span+emp+elf)+"</div>";
要删除父级，您可以item.parentNode.remove();，在this事件中将元素作为onclick传递：
<div class="close_button" onclick="deleteItem(this)">x</div>
删除元素的功能：
deleteItem = function(item) {
item.parentNode.remove();
}
数组中的项目怎么样？
为此，我们需要从元素中获取文本，删除包含(x[Number])的文本，然后修剪它。从那里我们需要遍历数组并找到具有匹配文本的元素，并从我们的数组中删除该元素。为此，我创建了一个单独的函数来从数组中删除元素：
function removeTextFromArray(array, text){
for (var i=array.length-1; i>=0; i--) {
if (array[i] === text) {
array.splice(i, 1);
quantities.splice(i, 1); // Removes from quantities at same position
return array;
}
}
}
要获取文本，并删除我们在该文本中不需要的内容：
deleteItem = function(item) {
item.parentElement.remove();
// Gets the text in the close_span class of the parent div
var textInNode = item.parentNode.getElementsByClassName("close_span")[0].innerHTML;
// Removes the items in (...) and trims the string.
textInNode = textInNode.replace(/ *\([^)]*\) */g, "").trim();
// Takes the string and removes it from the codes array
codes = removeTextFromArray(codes, textInNode);
}
答案 2 :(得分：0)
这里一切正常。只需点击运行
product_codes=['code1', 'code2', 'code3'];
quantities=[23, 67, 87];
function deleteIt(e){
e.parentNode.remove();
}
document.getElementById('cart_body').innerHTML='';
cart_text='';
emp='<div class="close_button" onclick="deleteIt(this)">x</div>';
open_span='<span class="close_span ">';
close_span='</span>';
elf='<br class="none"/>';
for(i=0; i<product_codes.length; i++){
cart_text+='<div>'+(open_span+product_codes[i]+"(x"+quantities[i]+")"+close_span+emp+elf)+'</div>';
}
document.getElementById('cart_body').innerHTML=cart_text;.close_button{
display: inline-block;
margin:4px;
position:relative;
background-color: red;
color:blue;
border:1px solid transparent;
border-radius: 50%;
padding:2px 7px;
cursor:default;
}
.close_button:hover{
border: 1px solid blue;
}
span{
display: inline-block;
}<div id='cart_body'></div>
答案 3 :(得分：0)
x = document.getElementsByClassName("e");
for (var i=0; i < x.length; i++) {
x[i].onclick = function() {deleteIt(this)}
}
function deleteIt(x) {
x.style.display = "none"
}<div class=e>Some text 0</div>
<div class=e>Some text 1</div>
<div class=e>Some text 2</div>
<div class=e>Some text 3</div>
<div class=e>Some text 4</div>
<div class=e>Some text 5</div>
编辑纯JS，感谢这篇文章Applying onClick to Element Array in a For Loop
答案 4 :(得分：0)
如您所愿，这里是以下解决方案，不使用任何frameowrk或库。
HTML：
<div id='cart_body'></div>
<button OnClick='myfunction()'>Click me</button>
JS：
codes=['hi', 'random text', 'lorem ipsum'];
quantities=[1, 45, 32];
deleteDiv = function(e) {
console.log(e);
var code_name_str = e.currentTarget.parentNode.getElementsByTagName('span')[0].innerText.split('(')[0];
var code_name = code_name_str.substring(0, code_name_str.length - 1);
var code_index = codes.indexOf(code_name);
if (code_index > -1) {
codes.splice(code_index, 1);
}
console.log(codes);
var code_quantity_str = e.currentTarget.parentNode.getElementsByTagName('span')[0].innerText.split('(')[1];
var code_quantity = code_quantity_str.substring(0, code_quantity_str.length - 1);
var quantity_index = quantities.indexOf(parseInt(code_quantity));
if (quantity_index > -1) {
quantities.splice(quantity_index, 1);
}
console.log(quantities);
e.currentTarget.parentNode.parentElement.removeChild(e.currentTarget.parentNode);
}
myfunction = function(){
document.getElementById('cart_body').innerHTML='';
open_div = '<div>'
cart_text='';
emp='<div id="sam" class="close_button" onclick="deleteDiv(event)">x</div>';
open_span='<span class="close_span">';
close_span='</span>';
elf='<br class="none"/>';
close_div = '</div>'
for(i=0; i<codes.length; i++){
cart_text+=(open_div+open_span+codes[i]+" ("+quantities[i]+")"+close_span+emp+elf+close_div);
}
document.getElementById('cart_body').innerHTML=cart_text;
}
CSS：
#cart_body{
height: 300px;
width: 300px;
text-align: center;
border: 1px solid black;
}
span{
text-align: center;
display: inline-block;
}
.close_button{
border: 1px solid black;
width: 12px;
height: 12px;
border-radius: 90px;
font-size: 12px;
text-align: center;
line-height: 11px;
background-color: lightGrey;
display: inline-block;
margin-left: 20px;
}
body{
font-size: 12px;
}
.close_button:hover{
color: red;
border: 2px solid red;
font-weight: bold;
}
小提琴链接：