Question

I’m trying to figure out how to remove BR tags underneath a particular TD element with a specific ID. So far I’ve had no success. Here is some example code via jfiddle:

HTML:

<br>
<table border='1'>
 <tr>
  <td id="attachmentsOnClient">
   <span dir="ltr">
    <input id="ontidIOFile" type="file" />
    <br>
   </span>
   <input id="fileupload1" type="file" />
   <br>
   <input id="fileupload2" type="file" />
   <br>
  </td>
  <td>
    Leave <br> This <br> Alone <br> Here
  </td>
 </tr>
</table>

Javascript onload:

$('#attachmentsOnClient').find('br').remove();​

​

Changing the HTML above so that it’s no longer a table, but the “attachmentsOnClient” TD is a div, the above javascript works, however on a TD element it fails. I’m not sure if I’m selecting it correctly or not, this is only my second foray into JQuery

An example in jfiddle can be seen Here.

EDIT: As talked about below, the newlines are due to the formatting of the input file blocks through jfiddle. The JQuery itself is indeed working.

Answer 1

The reason you are seeing this is that the file upload input is rendered in part by the browser, but also by the operating system. For instance, different browsers will show them different, but also the same browser on different operating systems (windows 2000, windows xp, mac etc) will display them differently.

Your best bet here is to use some custom style using CSS with a combination of CSS where you use display: inline-block; on the container and some position:relative; on the input and then place there where you would like. You are also likely, due to the fact that you have multiple, have a need to put a class on each one so that you are able to position them relative to each other. You could add the class attributes either through the markup, or through the jQuery code for example.

EDIT NOTE: As proof that your jQuery IS working, the following alerts (3), then (0):

alert($('#attachmentsOnClient').find('br').length);
$('#attachmentsOnClient').find('br').remove();
alert($('#attachmentsOnClient').find('br').length);