Javascript 带可点击超链接的可编辑DIV

第一部分是创建一个包含可点击超链接的div

HTML:

根据上面的代码，我有一个DIV，它看起来像一个可编辑字段，包含3个超链接，用户可以单击并导航到相应的页面

这部分很好用

现在我想要的是，我想要这个DIV是可编辑的，这样用户可以手动输入另一个超链接并单击按钮，这个新的超链接也将在DIV中显示为一个可单击的项目以及已经存在的3

用户还应该能够删除已经存在的超链接

---

怎么做？

JSFIDDLE

可以使用.append（）添加新项。在我的示例中，我从文本框中的文本创建一个新链接，然后

    $('selector').append(content);

您可以通过选择项目并调用.remove（）来删除项目。在链接旁边添加delete元素，然后添加click事件处理程序：

$('.delete').click(function () {
        $(this).prev('a').remove();
}

---

你似乎很清楚自己想要什么。你被卡住的部分是什么？我建议看一下

选择

API。你不需要它来做你想做的事情，但是如果你想确保你不需要移动光标就可以做，你需要它：到目前为止你有什么？换句话说，你在挣扎哪一部分？是否使字段可编辑？保存内容？防止人们放入非链接项目？还有什么？光标不显示在主分区内。我希望光标显示在主分区（id输入）内，以便用户可以在那里键入内容。同时，用户应该能够点击退格按钮并删除现有的超链接项，这与您的方法类似，而且这似乎是向DIV添加新项而不是编辑DIV本身的唯一方法。我看到的一个问题是，在通过“添加链接”按钮添加新链接后，它显示为可点击的超链接，但它不起作用。i、 例如，我无法单击新项目并导航到页面。我正在将链接添加到外部div，而不是其他链接所在的内部div。我更新了小提琴，现在可以用了。

    $('selector').append(content);

$('.delete').click(function () {
        $(this).prev('a').remove();
}