Jquery .removeClass до добавления не удается на <tr>

Question

Смотри jsfiddle

https://jsfiddle.net/codenoob/3v3mfndg/1/

У меня есть стол, который скрыт. Я установил это как шаблон, чтобы клонировать больше строк.

однако я хочу удалить скрытый класс при добавлении новых строк, но не могу.

Он может удалить класс всех элементов после <tr>

проверить это, удалив скрытый класс из <tr> и запустить код.

что я сделал не так?

если вы не можете использовать jsfiddle, вот код

HTML

<table id="cloneinhere">
  <tbody>
    <tr id="clone" class="hidden">
      <td>
      <text id="redtext" class="red">hi</text>
      </td>
    </tr>
  </tbody>
</table>
<button id="clonebtn">
  add row
</button>

Jquery

var original = $('#clone'); //get html for the sample row

$('#clonebtn').click(function() {
var clone = original.clone();
  clone.find('#clone').removeClass("hidden");
  clone.find('#redtext').removeClass("red");
  $('#cloneinhere > tbody:last').append(clone);
});

CSS

.hidden {
  display: none;
}

.red{
  color: red;
}

Answer 1

Проверьте ниже решение, будет работать для вас

$(function() {
var original = $('#clone'); //get html for the sample row

$('#clonebtn').click(function() {
var clone = original.clone();
 clone.removeClass("hidden");
   clone.find('#redtext').removeClass("red");
  $('#cloneinhere > tbody:last').append(clone);
});
});

.hidden {
  display: none;
}

.red{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="cloneinhere">
  <tbody>
    <tr id="clone" class="hidden">
      <td>
      <text id="redtext" class="red">hi</text>
      </td>
    </tr>
  </tbody>
</table>
<button id="clonebtn">
  add row
</button>