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中添加一个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.Here是代码：

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();会删除P元素中的最后2个#file元素：

LIVE DEMO

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/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice

Answer 4

这对我有用。似乎打破这种功能的一件事是添加文本在单独的行上。所以，总是在javascript中将这种“txt”添加到一行。

<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>

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

4 个答案: