<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();" />  

The above is two button which add or remove div on its calls.I have a java script function which is adding a div in html on call which works perfect

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

However i am using the same script(with modification) to remove the last inserted div in it but its removing the whole html in the div.Here is the code:

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

The output it generate is.I want the last div inserted to be remove on button click

NaN

<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();" />  

The above is two button which add or remove div on its calls.I have a java script function which is adding a div in html on call which works perfect

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

However i am using the same script(with modification) to remove the last inserted div in it but its removing the whole html in the div.Here is the code:

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

The output it generate is.I want the last div inserted to be remove on button click

NaN

• javascript
• html

Share Improve this question Follow edited Apr 26, 2013 at 12:53 CodePlayer asked Apr 26, 2013 at 12:45 CodePlayerCodePlayer 16955 silver badges1919 bronze badges 7

• 1 where is last div ? – Adil Shaikh Commented Apr 26, 2013 at 12:47
• You are not adding any div, are you? – A. Wolff Commented Apr 26, 2013 at 12:48
• 3 As you've tagged this question with jquery may I suggest using jquery – Andy Gee Commented Apr 26, 2013 at 12:48
• you can use removeChild() function of javascript – Mahesh Patidar Commented Apr 26, 2013 at 12:48
• theres no divs and why arent you using jquery? – Alex Commented Apr 26, 2013 at 12:48

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

As already said in ments, you are adding p elements here, not div.

If you don’t want to use jQuery, you can do it in “pure JS” as well, like this:

function lastParagraphBeGone() { // brilliant function name :-)
  var paragraphs = document.getElementById("file").getElementsByTagName("p");
  var lastParagraph = paragraphs[paragraphs.length-1];
  lastParagraph.parentNode.removeChild(lastParagraph);
}

$('#file p').slice(-2).remove(); will remove the last 2 P elements from your #file element:

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

Javascript uses the same operator for concatenation and for addition; so adding works.

But the minus operator is only for subtraction. So you try to subtract text from text which aren't numbers, so it's a NaN.

You cannot remove by this way: Use some function to search the beginning of this string and extract it so or simply add an id attribute to your <p> tag, so you can simply hide it when not needed anymore.

This works for me. One thing that seems to break this kind of function is when the adding text is on separate lines. So, always put that kind of "txt" addition on a single line in 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>