如何使用Javascript/jQuery将事件处理程序绑定到数组项的移除

Question

所以我正在玩的这个迷你程序有四个方面：

1. 主显示器(一次显示输入的字符串1)
2. 用户输入单词的形式
3. 存储每个用户输入的字符串的独立阵列；以及
4. 显示用户当前输入的所有字符串的控制面板(迷你显示器)

当前，当用户输入字符串时，它会被发送到容器数组。从阵列中，它进入显示器和控制面板。我添加了一个事件处理程序函数，允许用户双击控制面板中的条目，然后只从控制面板中删除该条目。。。(但我需要双击事件来从数组中删除条目)

$(".controlbox").on('dblclick', 'p', function() {
$(this).closest('p').remove();
});

SEE原始代码：

FIDDLE

那么，我该如何绑定这个事件处理程序，以便它也能从容器数组中删除条目呢？？？(因此，这也会导致条目从主显示屏上删除，这就是我的目标)

我希望用户能够从控制面板中删除条目，而不是必须从数组中删除数组的元素。换句话说，我希望控制面板充当控制面板，因此需要以某种方式将该事件处理程序链接回容器数组。。。。

Answer 1

您可以通过索引将控制台中的条目(双击的条目)与容器数组中的条目关联起来。也就是说，控制台中的条目组成了".contator"元素的子项列表，并且具有与容器数组中的条目相同的索引。

因此，您可以使用以下方法从容器数组中删除条目。

$(".controlbox").on('dblclick', 'p', function() {
var $entry = $(this);
container.splice($entry.index(), 1);
$entry.remove();
});

jsfiddle