javascript - 带有可点击超链接的可编辑 DIV

Question

我完成了创建包含可点击超链接的 div 的第 1 部分。

HTML:

<div id="input" contenteditable>

<div contentEditable="false">

<a href="http://www.w3schools.com">Visit W3Schools</a> - <a href="http://www.google.com">Visit W3Schools</a> - <a href="http://www.yahoo.com">Visit W3Schools</a>

</div>

</div>

CSS:

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

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

那部分工作正常。

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

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

怎么做？

Answer 1

JSFIDDLE https://jsfiddle.net/seadonk/vg4m5tso/

您可以使用 .append() 添加新元素。在我的示例中，我从文本框中的文本创建了一个新链接，并且

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

您可以通过选择元素并调用 .remove() 来删除元素。在链接旁边添加一个删除元素，然后添加一个点击事件处理程序:

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