codenoob codenoob - 3 months ago 11
jQuery Question

Jquery .removeClass before append fails on <tr>

see jsfiddle

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

I have a table that is hidden. I set that as a template to clone more row.

however I want to remove the hidden class when appending new rows but cant.

It can removeClass on all the element after the

<tr>


test it by removing the hidden class from
<tr>
and run the code.

what did I do wrong?

if you cant use jsfiddle here are the code

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

Check below solution, will work out for you

$(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>

Comments