如何仅使用 javascript 将删除按钮添加到输入显示？

Question

好的，在我提出问题之前，我已经对这个答案进行了高低搜索，但我只得出了没有尽头的答案或 jQuery 答案。我正在尝试仅使用 JAVASCRIPT 来执行此操作。没有其他图书馆。

我知道我在正确的轨道上，但我只是不知道如何只删除我在 div 中创建的输入的最后一个条目（全部使用 js）。那么，如何使删除按钮实际上只删除它所附加的输入条目？

我将我的脚本放在 jsbin 中。任何帮助将不胜感激！先感谢您！ (:

我想我应该在这里添加我的代码，所以这里是：

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="">
<br/>
<br/>
Age: <input type="number" name="age">

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
    var input = document.getElementsByTagName('input')[0].value;
    var agenum = document.getElementsByTagName('input')[1].value;
    var div = document.createElement('div');
    div.style.border = '2px solid red';
    div.style.padding = '10px';
    div.style.display = 'block';
    document.body.appendChild(div);
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum;
    div.innerHTML = output;
    deleteButton(div);
}

function deleteButton(x) {
    var del = document.createElement('button');
    del.style.textDecoration = 'none';
    del.innerHTML = 'Remove this person?';
    del.style.color = 'white';
    del.style.backgroundColor = 'blue';
    document.body.appendChild(del);
}


</script>

</body>
</html>

Answer 1

你不知道的是如何删除 div 本身，你需要将它传递给你的 deleteButton 函数并使用 removeChild 来删除它。与删除按钮本身类似，this 是此处的关键字。

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="">
<br/>
<br/>
Age: <input type="number" name="age">

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
  
    var input = document.getElementsByTagName('input')[0].value;
    var agenum = document.getElementsByTagName('input')[1].value;
    var div = document.createElement('div');
    div.style.border = '2px solid red';
    div.style.padding = '10px';
    div.style.display = 'block';
    document.body.appendChild(div);
  
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum;
    div.innerHTML = output;
    
    //create your delete button after you click try it
    var del = document.createElement('button');
    del.style.textDecoration = 'none';
    del.innerHTML = 'Remove this person?';
    del.style.color = 'white';
    del.style.backgroundColor = 'blue';
    //assign a function for it when clicked
    del.onclick = function() { deleteButton(div,this)}; 
    document.body.appendChild(del);
   <!--  deleteButton(div);  --> 
}

function deleteButton(x,y) {
   
    var parent = document.getElementsByTagName("BODY")[0];
    //remove the div
    parent.removeChild(x);
    //remore the button
    parent.removeChild(y);
    
}


</script>

</body>
</html>

Answer 2

你绝对是在正确的轨道上。最简单的方法是添加事件处理程序

del.addEventListener('click', function(){ x.parentNode.removeChild(x); })

虽然您还需要确保删除按钮，但我相信您可以解决这个问题。这里还有将 jQuery 转换为 vanilla JS http://youmightnotneedjquery.com/

的重要资源

如何仅使用 javascript 将删除按钮添加到输入显示？

How can I add a delete button to an input display using only javascript?

javascript

html

input

removechild