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 "delete" 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 "delete" 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); }
Comments
Post a Comment