javascript - Create new <li> element with textarea onclick of button -


html:

<li><textarea></textarea></li><br><a id="newpoints"></a> <input type="button" value="+ add new point" onclick="newpoint();"> 

css (if need it):

textarea {     font-family: georgia, 'times new roman', times, serif;     vertical-align: text-top;     width: 300px;     height: 60px;     resize: vertical;     padding: 10px; } 

and javascript:

function newpoint() {     var = document.getelementbyid("newpoints");     a.innerhtml += '<li><textarea placeholder="to delete point, select textbox , press &quot;delete&quot; button on keyboard." onkeydown="if(event.keycode == 46) { this.parentnode.nextsibling.parentnode.removechild(this.parentnode.nextsibling); this.parentnode.parentnode.removechild(this.parentnode); }"></textarea></li><br>'; } 

to better visualise, here's fiddle.

so basically, code above, i'm trying make such when user clicks on button, new <li> (that comes <br> after it) contains <textarea> created. new <li>, <textarea> , following <br> deleted when user presses delete button on keyboard while selecting textarea.

the problem that, when user creates new <li> , types text textarea, create <li>, text textarea of previous <li> disappear.

how can fix this?

use createelement , appendchild add elements. think happening when append innerhtml, overwriting in newpoints.

function newpoint() {     var = document.getelementbyid("newpoints");     var l = document.createelement("li");     l.innerhtml = '<textarea placeholder="to delete point, select textbox , press &quot;delete&quot; button on keyboard." onkeydown="if(event.keycode == 46) { this.parentnode.nextsibling.parentnode.removechild(this.parentnode.nextsibling); this.parentnode.parentnode.removechild(this.parentnode); }"></textarea>';     var b = document.createelement("br");     a.appendchild(l);     a.appendchild(b); } 

http://jsfiddle.net/mzene/1/


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -