编辑动态生成的列表项的文本,其中没有图标



我正在玩著名的任务列表应用程序练习,并希望通过每个动态添加<li>中的编辑按钮对其进行扩展。

至于现在我的<li>看起来像这样:

<li class="list-item">
"some text from my input"
<a class="delete-task">... //delete icon
<a class="edit-task">...   //edit icon
</li>

现在,如果我将<li>设置为contenteditable='true',我可以编辑它的文本,也可以删除这些图标,甚至在其中写一些东西,这太疯狂了。

问:使用vanilla js,如何编写一个函数,在单击编辑图标后,只允许我更改文本?

这是一个链接来可视化我的<li>: https://i.stack.imgur.com/kt4zM.jpg

将文本包装在<span>标签中,仅使其可编辑。

document.querySelector("a.edit-task")
.addEventListener("click", function(e) {
e.preventDefault();
var span = this.previousElementSibling;
span.contentEditable = span.contentEditable == "true" ? "false" : "true";
});
.list-item span { margin-right: 10px; }
.list-item img { height: 16px; }
span[contenteditable="true"] { background-color: yellow; }
<ul>
<li class="list-item">
<span>lorem ipsum dolor amet...</span>
<a class="edit-task" href="#">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ1IDQ1IiBoZWlnaHQ9IjQ1cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0NSA0NSIgd2lkdGg9IjQ1cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMyMzFGMjAiIGhlaWdodD0iMjMiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjcwNzEgLTAuNzA3MiAwLjcwNzIgLTAuNzA3MSAzOC4yNjY2IDQ4LjYwMjkpIiB3aWR0aD0iMTEiIHg9IjIzLjciIHk9IjQuODc1Ii8+PHBhdGggZD0iTTQ0LjA4NywzLjY4NmwtMi40OTQtMi40OTRjLTEuMzc3LTEuMzc3LTMuNjEtMS4zNzctNC45ODcsMEwzNC44NTYsMi45NGw3Ljc3OCw3Ljc3OGwxLjc0OS0xLjc0OSAgIEM0NS43NjEsNy41OTMsNDUuNDY1LDUuMDYzLDQ0LjA4NywzLjY4NnoiIGZpbGw9IiMyMzFGMjAiLz48cG9seWdvbiBmaWxsPSIjMjMxRjIwIiBwb2ludHM9IjE2LDIyLjIyOSAxNiwzMCAyMy4yNDYsMzAgICIvPjxwYXRoIGQ9Ik0yOSw0MEg1VjE2aDEyLjU1NWw1LTVIMy41QzEuODQzLDExLDAsMTEuODQzLDAsMTMuNXYyOEMwLDQzLjE1NiwxLjg0Myw0NSwzLjUsNDVoMjggICBjMS42NTYsMCwyLjUtMS44NDQsMi41LTMuNVYyMy41OTZsLTUsNVY0MHoiIGZpbGw9IiMyMzFGMjAiLz48L2c+PC9zdmc+"
alt="edit" title="edit" />
</a>
</li>
</ul>

最新更新