附加前的Jquery .removeClass失败

时间:2016-08-17 20:37:05

标签: jquery append attr removeclass

见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;
}

1 个答案:

答案 0 :(得分:0)

检查以下解决方案,将为您解决

&#13;
&#13;
$(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);
});
});
&#13;
.hidden {
  display: none;
}

.red{
  color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;