Hide span in second table row through jQuery

I have a table that is generated in flask:

<table class="table" id="preferencesTable">
  <thead>
    <th>
      <span>Fall 2016 Course Preferences</span>
      <span id="addPreference" class="glyphicon glyphicon-plus-sign pull-right"></span>
    </th>
  </thead>
  <tbody>
    {% for row in data.course_preferences %}
        <tr id="{{row.id}}">
          <td>
            {{ row.name }}
            <span class="pull-right">
              <span class="glyphicon glyphicon-arrow-up icon_padding"></span>
              <span class="glyphicon glyphicon-arrow-down icon_padding"></span>
              <span class="glyphicon glyphicon-remove icon_padding></span>
              <span class="glyphicon glyphicon-remove icon_padding></span>
            </span>
          </td>
        </tr>
    {% endfor %}
  </tbody>
</table>

I want to have the up and down arrows move the order of the table rows. Because the first table row (not including the header) is at the top, the up arrow is not needed. I want to hide this arrow.

I am able to find that span with the following:

$('#preferencesTable tr:nth-child(2) span')[2]

which returns

<span class=?"glyphicon glyphicon-arrow-down icon_padding">?::before?</span>?

But I lose all of the abilities to show and hide the span (.css, .hide, etc. are no longer valid).

How can I hide this span only on the first row?

Answers 1

Related Articles