使用 javascript 中的 2 个按钮添加和删除文本（条件：使用 div id 'divResult' ，控制台日志。）答案

【问题标题】：Add and Delete text using 2 buttons in javascript (conditions : use div id 'divResult' , console log.)使用 javascript 中的 2 个按钮添加和删除文本（条件：使用 div id 'divResult' ，控制台日志。）
【发布时间】：2020-05-04 18:36:16
【问题描述】：

我想制作一个带有 2 个按钮（添加、删除）的网页。条件是使用 div id divResult ，控制台日志，并且在删除该 div 后必须保留。它几乎可以正常工作，只是最后一步（删除 alinea）不起作用。你能帮我吗，我该如何解决？ :-)

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>2 buttons</title>
  <script >

var index = 1;

window.onload = function () {
  document.getElementById('Btn1').onclick = function () {

    var newElement = document.createElement('div');
    newElement.id = 'div' + index++;
    
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);
    
    newElement.appendChild(newNode);

    console.log(newElement);
    document.getElementById('divResult').appendChild(newElement);
  };
  document.getElementById('Btn2').onclick = function () {
		
                var oldDiv = document.getElementById('txtElement')
				var alinea = oldDiv.querySelectorAll('p:last-child')[0]; 
				console.log(alinea + ' wordt verwijderd...');
				
				oldDiv.removeChild(alinea);
				console.log('verwijderd!');
  };
};
  </script>
</head>
<body>
  <p>Type your text in the text box and click on Button</p>
  <input type="text" id="txtElement">
  <button id="Btn1">Add</button>
  <button id="Btn2">Delete</button>
  <div id="divResult"></div>
  <div id="oldDiv"></div>
</body>

</html>

【问题讨论】：

标签： javascript html button add console.log

【解决方案1】：

我尝试了一些东西，移动了一些东西。我认为它现在正在做你想做的事。

	  var index = 1;

	  window.onload = function () {
			document.getElementById('Btn1').onclick = function () {

				 var newElement = document.createElement('div');
				 newElement.id = 'div' + index++;

				 var node = document.getElementById('txtElement').value;
				 var newNode = document.createTextNode(node);

				 newElement.appendChild(newNode);

				 console.log(newElement);
				 document.getElementById('divResult').appendChild(newElement);
			};
			document.getElementById('Btn2').onclick = function () {

				 var oldDiv = document.getElementById('txtElement');
				 var divResult = document.getElementById('divResult');
				 var alinea = divResult.querySelectorAll('div:last-child')[0];
				 console.log(alinea + ' wordt verwijderd...');

				 alinea.remove();
				 // divResult.removeChild(alinea);
				 console.log('verwijderd!');
			};
	  };

<p>Type your text in the text box and click on Button</p>
<input type="text" id="txtElement">
<button id="Btn1">Add</button>
<button id="Btn2">Delete</button>
<div id="divResult"></div>
<div id="oldDiv"></div>

【讨论】：

是的。这正是我需要的。谢谢：-D

【解决方案2】：

如果我理解正确，请更改以下部分：

  document.getElementById('Btn2').onclick = function () {
            var alinea = document.getElementById('div'+ --index); 
            console.log(alinea.innerHTML + ' wordt verwijderd...');
            alinea.remove(alinea);
            console.log('verwijderd!');
    };

【讨论】：

你好 Alex，你能帮我解决一下这个stackoverflow.com/questions/62521441/… 吗？