Question

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

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();
}

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

1 个答案: