-1 
<div id="file">                                    
<input type="file" name="txtImage" multiple="multiple" class="upload" />  
<input type="text"  name="txtImageDesc" class="desc" /> 
</div>      
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />

以上是在调用时添加或删除 div 的两个按钮。我有一个 java 脚本函数，它在调用时在 html 中添加一个 div，效果很好

function  add_more() 
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>   <p>
<label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("file").innerHTML += txt;
}

但是，我使用相同的脚本（经过修改）来删除其中最后插​​入的 div，但它删除了 div 中的整个 html。代码如下：

function  remove() {
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>    
<p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("file").innerHTML -= txt;
 }

它生成的输出是。我希望在单击按钮时删除最后插入的 div

NaN
4

4 回答 4

3

正如评论中已经说过的，您在p这里添加元素，而不是div.

如果您不想使用 jQuery，也可以在“纯 JS”中使用，如下所示：

function lastParagraphBeGone() { // brilliant function name :-)
  var paragraphs = document.getElementById("file").getElementsByTagName("p");
  var lastParagraph = paragraphs[paragraphs.length-1];
  lastParagraph.parentNode.removeChild(lastParagraph);
}
于 2013-04-26T12:55:20.177 回答
2

Javascript 使用相同的运算符进行连接和加法；所以添加作品。

但是减号运算符仅用于减法。所以你尝试从不是数字的文本中减去文本，所以它是一个NaN.

你不能通过这种方式删除：使用一些函数来搜索这个字符串的开头并提取它，或者简单地id为你的标签添加一个属性<p>，这样你就可以在不再需要时简单地隐藏它。

于 2013-04-26T12:49:38.207 回答
2

$('#file p').slice(-2).remove();P将从您的元素中删除最后 2 个元素#file：

LIVE DEMO

HTML：

<input type="button" value="Add" name="addButton" />
<input type="button" value="Remove" name="removeButton" /> 

<div id="file"></div>

问：

var html = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"></p>";


$('[name=addButton]').click(function(){
    $('#file').append( html );
});
$('[name=removeButton]').click(function(){
  $('#file p').slice(-2).remove();
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice

于 2013-04-26T12:56:26.097 回答
1

这对我有用。似乎破坏这种功能的一件事是当添加文本在单独的行上时。因此，请始终将这种“txt”添加放在 javascript 的一行中。

<script type="text/javascript" >
function  add_more() 
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("extra-text").innerHTML = txt;
}

function  remove() {
 document.getElementById("extra-text").innerHTML = '';
 }
</script>

<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />


<div id="file"><h1>Existing text</h1>

<div id="extra-text"></div>

</div>
于 2013-04-26T12:59:43.353 回答