Jquery .removeClass 在追加失败之前 <tr>

Question

查看 jsfiddle

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

我有一个 table 是隐藏的。我将其设置为模板以克隆更多行。

但是我想在添加新行时删除隐藏的 class 但不能。

它可以在 <tr>

之后的所有元素上删除类

通过从 <tr> 和运行代码中删除隐藏的 class 来测试它。

我做错了什么？

如果你不会使用 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>

Jquery .removeClass 在追加失败之前 <tr>

Jquery .removeClass before append fails on <tr>

jquery

append

attr

removeclass