events - Removing two children and its parent with Javascript -
been struggling 1 have following dom structure:
<ol id="add_images"> <li> <input type="file" /><input type="button" name="removebutton" /> </li> <li> <input type="file" /><input type="button" name="removebutton" /> </li> <li> <input type="file" /><input type="button" name="removebutton" /> </li>
basically i'm trying remove children , containing parent (the li tag) when clicking remove button.
i have tried every manner of parentnode , removechild combinations. below javascript, can children not parent.
function addfile(addfilebutton) { var form = document.getelementbyid('add_images'); var li = form.appendchild(document.createelement("li")); //add additional input fields should user want upload additional images. var f = li.appendchild(document.createelement("input")); f.classname="input"; f.type="file"; f.name="files[]"; //add remove field button should user change mind var rb = li.appendchild(document.createelement("input")); rb.type="button"; rb.value="remove file"; rb.onclick = function () {//this problem li.removechild(this.parentnode); li.removechild(this); } }
i'm sure simple. help.
since you're trying remove <li>
, need parentnode, ol
.
li.parentnode.removechild(this.parentnode);
you use form
variable reference ol
.
form.removechild(this.parentnode);
or:
form.removechild(li);
or without variables in order avoid creating closure.
this.parentnode.parentnode.removechild(this.parentnode);
Comments
Post a Comment