如何在JavaScript中删除最后插入的div？

Question

<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调用时在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

Answer 1

正如评论中已经说过的那样，您将在此处添加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);
}

Answer 2

Javascript使用相同的运算符进行串联和添加。 因此添加作品。

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

您无法通过这种方式删除：使用某些函数搜索此字符串的开头并将其提取出来，或者只是将id属性添加到<p>标记中，这样就可以在不再需要时将其隐藏。

Answer 3

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

现场演示

HTML：

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

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

jQ：

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/zh-CN/docs/JavaScript/Reference/Global_Objects/Array/slice

Answer 4

这对我有用。 似乎破坏了这种功能的一件事是当添加文本位于单独的行上时。 因此，请始终将此类“ 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>