Question

这是我的代码。点击＆＃34后添加＆＃34;按钮它会生成一个新的文本字段，如果我不需要它，我想删除新的文本字段。但我不知道该怎么做。

<body>

<form>
Quiz name: <input type="text" name="firstname"><br>
Question name: <input type="text" name="lastname">
</form>

Choice<input type="text" name="textBox0"><input type="button" value="add" onclick="addInput()"/>

<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
     var boxName="textBox"+countBox; 
document.getElementById('responce').innerHTML+='<br/>Choice<input type="text" id="'+boxName+'"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput()"/>';
     countBox += 1;

}
function deleteInput()
{
    document.getElementById('responce').innerHTML+='choice';    
}
</script>

Code example

Answer 1

也许这段代码可以帮到你，但你并没有正确地创造元素。我添加了带有id的容器，你可以在点击删除时删除容器。

<body>

<form>
Quiz name: <input type="text" name="firstname"><br>
Question name: <input type="text" name="lastname">
</form>

Choice<input type="text" name="textBox0"><input type="button" value="add" onclick="addInput()"/>

<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
    var boxName="textBox"+countBox; 
    var contName="contBox"+countBox; 
    document.getElementById('responce').innerHTML+='<div id="'+contName+'"><br/>Choice<input type="text" id="'+boxName+'"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput('+contName+')"/></div>';
     countBox += 1;

}
function deleteInput(id)
{
   id.remove();
}
</script>    



</body>

Code example

Answer 2

这是一个解决方案。

JSFiddle： http://jsfiddle.net/KJa36/7/

<强> HTML：

<form>Quiz name:
    <input type="text" name="firstname" />
    <br/>Question name:
    <input type="text" name="lastname" />
</form>Choice
<input type="text" name="textBox0">
<input type="button" value="add" onclick="addInput()" />
<span id="responce"></span>

<强> JavaScript的：

//From: http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id
Element.prototype.remove = function () {
    this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function () {
    for (var i = 0, len = this.length; i < len; i++) {
        if (this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
};

var countBox = 1;
var boxName = 0;

function addInput() {
    var boxName = "textBox" + countBox;
    var divName = "Div_" + countBox;
    document.getElementById('responce').innerHTML += '<br/><div id="' + divName + '"> Choice<input type="text" id="' + boxName + '"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput(' + divName + ')"/></div>';
    countBox += 1;

}

function deleteInput(param_divName) {
    document.getElementById('responce').innerHTML += 'choice';
    document.getElementById(param_divName.id).remove();
}

如前所述，最好通过document.createElement语句创建元素。

Answer 3

我相信你刚刚开始学习javascript，所以我会给出一个详细的答案供你理解。

您可以使用remove（）轻松删除元素。

document.getElementById("#foo").remove();

让我们看看我们如何在我们的场景中使用它。您的代码具有以下内容，

<input type="text" name="textBox0">
<input type="button" value="add" onclick="addInput()"/>
<input type="button" value="delete" onclick="deleteInput()"/>

用户输入和拖曳按钮类型输入元素的一个文本类型输入元素，触发添加和删除javascript函数以添加/删除文本输入和按钮输入。

this是一个javascript关键字，用于保存当前对象的引用。我们将它作为参数传递给我们的deleteInput（），所以在我们的函数中我们知道我们正在处理哪个元素。

<input type="button" value="delete" onclick="deleteInput(this)"/>

现在，在我们的功能中，我们将自己接收该参数。我们的函数现在知道它正在处理删除按钮输入元素。只需在自己上调用remove（）即可。

function deleteInput(self) {
    //code to remove element
    self.remove();
}

但是运行该代码只会删除删除按钮。原因是我们没有告诉deleteInput（）方法我们需要删除文本输入和其他添加按钮输入。我们无法通过其他2个输入元素的引用，那么我们该怎么办？

让我们将输入元素包装在div

中

<div>
    <input type="text" name="textBox0">
    <input type="button" value="add" onclick="addInput()"/>
    <input type="button" value="delete" onclick="deleteInput()"/>
</div>

parentElement（）方法返回对您调用它的元素的父级的引用，因此调用self.parentElement（）将为您提供div的引用。

这样你就可以删除完成目标的整个div。

function deleteInput(self) {
    //code to remove element
    self.parentElement().remove();
}

请在此处找到代码并进行预览：http://plnkr.co/edit/ROs6YJe4XeJTPFr2NBUT?p=preview

如何在javascript中删除文本字段

3 个答案: