javascript - 删除函数中的子 DOM 元素

Question

我正在制作一个 Javascript 购物车。我可以正确地将产品添加到我的购物车，但我正在使用 delete_item() 函数。当我单击 × 删除项目时，项目名称只会消失，而该项目的 × 仍保留在那里。如果我更改函数中的代码位置，当我单击 × 删除该项目时，× 消失，但项目名称仍保留在那里。我做不到，我的意思是两者都应该消失。使用 refresh(); 作为商品名称，使用 rel(); 作为每个产品的 ×，我刷新了购物车。

function delete_item (nomP, idP, price, k) {
    idProduct.splice(k,1);
    nameProduct.splice(k,1);
    price.splice(k,1);

    $('#dlt').empty();
    document.getElementById("dlt").appendChild(rel());
    $('#nameProduct').empty();
    document.getElementById("nameProduct").appendChild(refresh());  
    return false;
};

编辑:我成功了

function pro () {
        rel();
        refresh();
      };
      function rel () {
          for (k = 0; k < idProducto.length; k++) {
          function dlt() {
              var element = document.createElement("p");    
              element.innerHTML = "<p class='close' type='button' onclick=\"return borrar('" + nombreProducto[k] + "', "+idProducto[k]+", "+precio[k]+", "+k+")\"><span>&times;</span></p>";
              return element;
          }
          document.getElementById("dlt").appendChild(dlt());
          }
      }
      function refresh () {
          for (j = 0; j < idProducto.length; j++) {
              productNames();
              document.getElementById("nombresProductos").appendChild(productNames());
          }
      } 

所以，删除函数......:

 function delete_item (nomP, idP, price, k) {
        idProduct.splice(k,1);
        nameProduct.splice(k,1);
        price.splice(k,1);

      $('#nombresProductos').empty();
      $('#dlt').empty();
      if (($('#nombresProductos').is(':empty')) && ($('#dlt').is(':empty'))) {
        pro();
      };
    return false;
    };

Answer 1

试试这个。

Javascript

for (j = 0; j < productArray.length; j++) {
    function productNames() {
        var element = document.createElement("p");
        element.innerHTML = productArray[j];
        return element;
    }
    document.getElementById("nameProduct").appendChild(productNames());
}
function refresh () {
    for (j = 0; j < productArray.length; j++) {
        productNames();
        document.getElementById("nameProduct").appendChild(productNames());
    }
}

for (k = 0; k < idProduct.length; k++) {    
    function dlt() {
        var element = document.createElement("p");    
        element.innerHTML = "<p class='close' type='button' onclick=\"return delete_item('" + productArray[k] + "', "+idProduct[k]+", "+precio[k]+", "+k+")\"><span>&times;</span></p>";
        return element;
    }
    document.getElementById("dlt").appendChild(dlt());
}
function rel () {
    for (k = 0; k < idProduct.length; k++) {
    function dlt() {
        var element = document.createElement("p");    
        element.innerHTML = "<p class='close' type='button' onclick=\"return delete_item('" + productArray[k] + "', "+idProduct[k]+", "+precio[k]+", "+k+")\"><span>&times;</span></p>";
        return element;
    }
    document.getElementById("dlt").appendChild(dlt());
    }
}

HTML

<div id="nameProduct" class="col-xs-6 col-md-7">
</div>
<div class="col-xs-2 col-md-2 text-right">
    <p>$105</p>
</div>