removing a div and focusing input field next to it

Question

Hello,

my html is like this

<td>
  <input type="text" class="textinput" id="file_descr_0" name="file_descr[0]" value='' />
  <div id="mean" onClick="removeElement('mean');">{L_FileDescr}</div>
</td>

and to remove the div i am using this function

function removeElement(div){ 
    var d2 = document.getElementById(div); 
    var d1 = d2.parentNode;
    d1.removeChild(d2); 
}

I wanted to know how I can make this removing element dynamic because there are lot of divs which are to be removed and because of this function i will have to give each one a id.

and also after removing how can i focus the input field.

Thank You.

Answer 1

you could pass the event in and use event.target

function removeElement(event) {
    //...
}

the onclick would just be onclick="removeElement"

Answer 2

<div onClick="removeElement(this);">{L_FileDescr}</div>

function removeElement(d2){ 
    var d1 = d2.parentNode;
    d1.removeChild(d2); 

    // edit. also:
    d1.nextSibling.firstChild.focus();
}

Answer 3

If the input is always the element before the div, you could do something like this

<input type="text" />
<div onClick="removeElementAndFocusInput(this);">stuff</div>

function removeElementAndFocusInput(elem){
    var toRemove = elem;

    toRemove.previousSibling.focus() // set focus to the input

    var parent = toRemove.parentNode;
    parent.removeChild(toRemove); // remove the div
}