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

Question

我想制作一个带有 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>

Answer 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>

Answer 2

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

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

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

Add and Delete text using 2 buttons in javascript (conditions : use div id 'divResult' , console log.)

javascript

html

button

add

console.log