Javascript – removing a div and focusing input field next to it

javascript

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.

Best Solution

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

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

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

Related Solutions

Javascript – When a ‘blur’ event occurs, how can I find out which element focus went to

Hmm... In Firefox, you can use explicitOriginalTarget to pull the element that was clicked on. I expected toElement to do the same for IE, but it does not appear to work... However, you can pull the newly-focused element from the document:

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

Caveat: This technique does not work for focus changes caused by tabbing through fields with the keyboard, and does not work at all in Chrome or Safari. The big problem with using activeElement (except in IE) is that it is not consistently updated until after the blur event has been processed, and may have no valid value at all during processing! This can be mitigated with a variation on the technique Michiel ended up using:

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

This should work in most modern browsers (tested in Chrome, IE, and Firefox), with the caveat that Chrome does not set focus on buttons that are clicked (vs. tabbed to).

Javascript – HTML-encoding lost when attribute read from input field

EDIT: This answer was posted a long ago, and the htmlDecode function introduced a XSS vulnerability. It has been modified changing the temporary element from a div to a textarea reducing the XSS chance. But nowadays, I would encourage you to use the DOMParser API as suggested in other anwswer.

I use these functions:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

Basically a textarea element is created in memory, but it is never appended to the document.

On the htmlEncode function I set the innerText of the element, and retrieve the encoded innerHTML; on the htmlDecode function I set the innerHTML value of the element and the innerText is retrieved.

Check a running example here.

Best Solution

Related Solutions

Javascript – When a ‘blur’ event occurs, how can I find out which element focus went *to*

Javascript – HTML-encoding lost when attribute read from input field

Related Question

Javascript – When a ‘blur’ event occurs, how can I find out which element focus went to