Javascript从数组中添加和删除在数组外部调用的值

我正在使用appendchild向div层添加一组跨距，如下所示：

var newSent = document.createElement("SPAN");
var current = document.createTextNode(sentInput.value);
newSent.style.backgroundColor = sentColor;
newSent.className = "sentSpan";
newSent.id = count - 1;
newSent.appendChild(current);
outputBox.appendChild(newSent);

其中outputBox是div层的名称，sentInput是输入文本框的当前值。我需要这些跨距中的每一个都可以单击，然后从数组中删除它们的值。目前我有一个事件监听器：

delCount = 0;
newSent.addEventListener("click", function(){
    var x = parseInt(newSent.id);

    sentCount.splice(x - delCount, 1);
    sentNum.splice(x - delCount, 1);

    delCount = delCount + 1;

    newSent.remove(x);
});

这个想法是，每次我删除一个跨度时，增量计数都会增加，以补偿现在更小的数组

经过几次删除后，效果不太好。。。我似乎无法找到处理不断变化的数组的数学或正确方法。单击两个或三个跨距后，我最终删除了与相邻跨距关联的数组中的值，但成功删除了跨距本身。此数组显示在图形上，因此正确显示非常重要

我临时让数组将删除的值替换为“0”，这非常有效，但我需要它们根本不出现在数组中。非常感谢您的帮助

---

编辑：添加了一个JSFIDLE，尽管在这么小的窗口中显示看起来很糟糕…

您是否能够在中创建一个演示，请准备JSFIDLE，否则它可能会陷入黑暗..问题是您正在根据索引删除它，当一个项目被删除后，元素的位置将向下移动1个索引，但删除代码仍将引用旧索引。。。因此，如果你能创建一个演示，我们可以更好地解释它…@ArunPJohny如果你想看的话，我在底部添加了一个JSFIDLE。。。