HTML/CSS/Javascript 删除按钮

Question

我有一个 div 中的项目列表，它由两个数组的内容决定。

product_codes=[code1, code2, code3];
quantities=[1, 34, 67,];

每次将新代码和数量添加到其各自的数组时，我都有一个 javascript 函数来执行此操作：

    document.getElementById('cart_body').innerHTML='';
    cart_text='';
    elf='<br class="none"/>';
    for(i=0; i<product_codes.length; i++){
        cart_text+=(product_codes[i]+"  (x"+quantities[i]+")"+elf);
    }
    document.getElementById('cart_body').innerHTML=cart_text;

并据此采取行动 HTML:

<div id='cart_body'></div>

用这个 CSS:

.none{margin-top: 0px;}

（CSS 只是覆盖了我给所有
标签的另一种样式）

我想要做的是，在添加到 cart_text 的每一行的末尾（插入的换行符之前），添加一个中间带有 x 的小圆形按钮（我想在 Bootstrap 中有类似的东西，但我无法使用它或任何其他库）单击时，从 div, AND 从它们各自的数组中删除两个项目（产品代码和数量）。理想情况下，上述删除按钮看起来类似于让您删除已发布评论的按钮（此处位于 Stack Overflow）。

仅请原版 CSS 和 Javascript 回答。请不要图书馆。

如果要求不高的话，一个可以工作的 JsFiddle 也很棒。

谢谢！

编辑

尝试按钮：#1

#close_button{
 border:  1px solid black;
 padding-top: 0;
 max-width: 15px;
 max-height:  15px;
 background-color: lightBlue;
 border-radius: 90px;
 font-size: 14px;
 text-align:  center;
}

<div id='close_button'>x</div>

这不起作用，因为我无法获得正确的尺寸，x 位于圆的正中心。我尝试了填充，所有这些好东西，但无济于事。

Answer 1

您可以在 https://jsfiddle.net/osha90/krrhvdmj/

使用以下代码

<div id='cart_body'>
<p>
  code1 x1 <span style="display:inline-block;width:30;height:30;background-color:#d2d2d2; border-radius: 50%;font-size:12px;line-height:18px;">X</span> 
</p>

  var product_codes=["code1", "code2", "code3"];
 var quantities=[1, 34, 67,];

   document.getElementById('cart_body').innerHTML='';

for(i=0; i<product_codes.length; i++){
    var p = document.createElement("p");
  p.appendChild(document.createTextNode(product_codes[i] +"     X    "+quantities[i]));
    var span = document.createElement("span");
    span.appendChild(document.createTextNode("X"));
    span.classList.add("delete");
    var a = document.createAttribute("data-productCode");
      a.value = product_codes[i];
    span.setAttributeNode(a);
    p.appendChild(span);
     span.addEventListener("click",removeElm);
  document.getElementById('cart_body').appendChild(p);
     }

function removeElm(){
    var div = this.parentNode.parentNode;
    for(i=0; i<product_codes.length; i++){
        if(product_codes[i] == this.getAttribute("data-productCode"))
        {product_codes.splice(i,1);
           quantities.splice(i,1);
        console.log(product_codes);
         console.log(quantities);
            break;
        }
    }
    div.removeChild(this.parentNode);

}

css代码

.delete{
  display: inline-block;
     width: 19px;
    height: 18px;
    text-align: center;
  background-color: #D2D2D2;
    border-radius: 50%;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
    }

HTML/CSS/Javascript 删除按钮

HTML/CSS/Javascript delete button

html

javascript

css

button

仅请原版 CSS 和 Javascript 回答。请不要图书馆。

编辑