Adding And Deleting Elements From A Textbox Array

I'm trying to solve a problem with JS textbox array without success.
I have two buttons in my page: PLUS and MINUS; at every click on PLUS a new
textbox named 'dear' is generated. So, if one clicks, say, 3 times the
output is something like:

dear[0]
dear[1]
dear[2]

The length property is accessible; alert(dear.length) gives Ɖ', correctly.
The prolbem is that is not possible to delete a textbox, clicking on MINUS
button. The thing I'd really need to do is to delete from the array (and in
consequence from video) the last textbox created, when one clicks on MINUS
button.

Pop() and Splice() methods do not work, unfortunely...
This is the exact code of my page:

<a href="#plus" onclick="john.innerHTML+='<li><input id=dear type=text
size=50>'">
[PLUS]
</a>
<br>
<a href="#minus" onclick="alert(dear.length);dear.pop()">
[MINUS]
</a>

<ul>
<div id=john>
</div>
</ul>