jQuery simultaneous addClass and removeClass

Question

I have a link to my code in Fiddle.

HTML :

<table border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
  </td>
  <td class="padding-right-5">
    <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
  </td>
  <td class="padding-right-5">
    <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
  </td>
  <td class="padding-right-5">
    <input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
  </td>
  <td class="padding-right-5">
    <input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
  </td>
  <td class="padding-right-5">
    <input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
  </td>
  <td class="padding-right-5">
    <input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
</tbody>
</table>

JS :

$(function() {
    $('table').on('click', '.hide-row', function(e) {
        console.log('hidden!');
        $( this ).parent().parent().hide();
    });


  $('.add-row').click(function(e) {
    $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });


});

What I want to do is when the user clicks 'add row' that another row is shown. The button the user clicks then turns into a button to remove the row that it's in at the same time.

What's happening is that it shows the new row and hides the row that they clicked on immediately. Anyone know what I'm doing wrong?

Thanks in advance!

Answer 1

$(function() {
  $('.add-row').click(function() {
    var $hideBtn = $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $hideBtn.click(function() {
        $(this).parent().parent().hide();
    })
    $( this ).parent().parent().next().show();
  });
});

Answer 2

If you want to make dynamic table rows, heres how you can achieve it. For good practice: add an ID to your table and delete the display:none rows. This jquery will add dynamic rows and toggle the add/remove buttons

$(function() {
    $('#mytable').on('click', '.add-row', function(e) {
        $('#mytable').append('<tr>' + $('#mytable tr:last-child').html()+'</tr>');
    $(this).removeClass('add-row').addClass('remove-row').html('Remove Row');
    });

  $('#mytable').on('click', '.remove-row', function(e) {
    $(this).parent().parent().remove();
    });
});

Answer 3

The problem come from click event, to attach event to new elements as .add-row (added dynamically) you have to use event delegation on() :

$('body').on('click', '.add-row', function(e) {

Hope this helps.

$(function() {
  $('table').on('click', '.hide-row', function(e) {
    console.log('hidden!');
    $( this ).parent().parent().hide();
  });


  $('body').on('click', '.add-row', function(e) {
    $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
      </td>
      <td class="padding-right-5">
        <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
      </td>
      <td class="padding-right-5">
        <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
      </td>
      <td class="padding-right-5">
        <input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
      </td>
      <td class="padding-right-5">
        <input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
      </td>
      <td class="padding-right-5">
        <input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
      </td>
      <td class="padding-right-5">
        <input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

Try to just use .attr('class', 'hide-row'), by doing that you're overwriting the class attribute all in one time.