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

Question

我正在玩著名的任务列表应用程序练习，想通过每个动态添加的编辑按钮扩展它 <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

Answer 1

将文本包裹在 <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>

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

Edit dynamically generated list item's text without icons in it

javascript

edit