将文本发送到父元素，并带有删除发送元素的选项- Javascript

Post text to a parent element with option to remove posted elements - Javascript

本文关键字：元素 删除 Javascript 选项 文本      更新时间：2023-09-26

有几件事我想帮忙。我已经找到了一些关于堆栈溢出的解决方案，但不能完全把它们放在一起。

我希望用户将文本添加到文本区域，单击按钮将文本发布到父元素，最后有选项从父元素中删除发布的文本元素。这是我所得到的代码。谢谢你的建议。

<body>
<h4>A News Module.</h4>
<div id="container">
  <p>Here is some news.<a href="#" onclick="deleteNews()"></a></p>
</div>
<textarea id="alltext" rows="13" cols="53" placeholder="Add your news here."></textarea>
<br>
<input type="button" value="Submit News" onclick="addNews()">
<script>
    function addNews(){
      var addEl = document.createElement('p');
      document.getElementById('container').appendChild(addEl);
     }
    function deleteNews(){
      var deleteEl = document.getElementById('container');
      deleteEl.parentNode.removeChild(deleteEl);
     }
</script>
</body>

也在jsfiddle: https://jsfiddle.net/lotus89/nvo1s5re/

两件事

1)需要将文本框中的文本添加到新创建的元素中。在创建后添加以下行:

addEl.textContent = document.getElementById('alltext').value;

获取文本框的值，并将其设置为新创建元素的textContent。

2) addNews()需要在jsfiddle的全局作用域中添加这一行:

window.addNews = addNews;

编辑:更新小提琴——https://jsfiddle.net/rtj998gL/1/

  1. 看看你的addNews代码。您正在创建一个新的p并将其添加到容器中，但您从未在中添加任何内容。

    function addNews(){
  //Create blank P element
  var addEl = document.createElement('p');
  //Set the new element's content to match the textarea value
  addEl.innerHTML = document.getElementById("alltext").value;
  //Add it to the container
  document.getElementById('container').appendChild(addEl);
}

  2. 如果您将<script>放在页面的头部，您的代码将正常工作。但因为它是在<body>，你的功能没有被发现，因为它们超出了范围。你可以通过在你的<script>标签中做window.addNews = addNews来调整这个

相关文章：