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将删除按钮添加到输入显示？

2 个答案: