CODEWITHSUNDEEP
jqueryunwrap
gtilflm
gtilflm

Reputation: 1465

Using jQuery's unwrap() to remove a class

I want to remove the class of emphasis from all tags that have that class in a specific cell of the table. I'm selecting the table cell content like this: 

var answer = $('tr.problem_display_work:last td:first').html();

In another place in the code, I'm using unwrap() like this: 

$(".emphasis").contents().unwrap();

However, I'm not sure how to combine the two. I tried this, but it failed:

var answer = $('tr.problem_display_work:last td:first').html().(".emphasis").contents().unwrap();

Any ideas?

EDIT FOR CLARIFICATION #1: I want to keep the HTML inside the tag. So, if I have: 14 + 6 = <span class="emphasis">20</span> I want to end up with 14 + 6 = 20.

EDIT FOR CLARIFICATION #2: The HTML in question is getting set as the value for a hidden <input> field like this $('#answer').val(answer);. Gleb Kemarsky's solution is good, but it doesn't get applied the value for the input field for some reason.

EDIT FOR CLARIFICATION #3...

I have a <table> with some rows and cells. In the first cell of the last row I have some content (14 + 6 = <span class="emphasis">20</span> for example).

I use var answer = $('tr.problem_display_work:last td:first').html(); to get the HTML of that cell, then I use $('#answer').val(answer); to update the value of a hidden <input id="answer">.

When that happens, I'd like to turn 14 + 6 = <span class="emphasis">20</span> into 14 + 6 = 20 for the value of the hidden <input id="answer">, but leave it as 14 + 6 = <span class="emphasis">20</span> in the table.

EDIT FOR CLARIFICATION #4...

The key is that any <span>s with the class of emphasis be removed.

This.. <span class="emphasis"><div class="fraction_display"><span class="numer_display">21</span><span class="bar_display">/</span><span style="border-top-color: green;" class="denom_display">23</span></div></span>

should end up as... <div class="fraction_display"><span class="numer_display">21</span><span class="bar_display">/</span><span style="border-top-color: green;" class="denom_display">23</span></div>

Upvotes: 0

Views: 610

Answers (2)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

How to remove the <span> tag from the answer

5) Create a copy of the HTML-element and apply the .unwrap() method

The same issue has been solved by Redu.

4) Delete <span class="emphasis"></span> from the answer (without nested tags)

var answer = $( 'tr.problem_display_work:last td:first' ).html();
$( '#answer' ).val( answer.replace( /<span class="emphasis">(.*?)<\/span>/g, '$1' ) );
.accent,
.emphasis {
  font-family: sans-serif;
  font-weight: bold;
  padding: 0 2px;
}
.accent   { background: yellow;  }
.emphasis { background: orange; }
table {
  margin-bottom: 12px;
}
td {
  border: solid 1px #999;
  padding: 2px 8px;
}
<table>
  <tr class="problem_display_work">
    <td><span class="accent">1</span> + <span class="accent">1</span> = <span class="emphasis">2</span></td>
    <td><span class="accent">2</span> + <span class="accent">2</span> = <span class="emphasis">4</span></td>
  </tr>
  <tr class="problem_display_work">
    <td><span class="accent">3</span> + <span class="accent">3</span> = <span class="emphasis">6</span></td>
    <td><span class="accent">4</span> + <span class="accent">4</span> = <span class="emphasis">8</span></td>
  </tr>
</table>

<input id="answer" size="70">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3) Delete all html-tags from the answer by the .replace() method

var answer = $( 'tr.problem_display_work:last td:first' ).html();
$( '#answer' ).val( answer.replace( /<[^>]+>/g, '' ) );
.emphasis {
  background: orange;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0 2px;
}
table {
  margin-bottom: 12px;
}
td {
  border: solid 1px #999;
  padding: 2px 8px;
}
<table>
  <tr class="problem_display_work">
    <td>1 + 1 = <span class="emphasis">2</span></td>
    <td>2 + 2 = <span class="emphasis">4</span></td>
  </tr>
  <tr class="problem_display_work">
    <td>3 + 3 = <span class="emphasis">6</span></td>
    <td>4 + 4 = <span class="emphasis">8</span></td>
  </tr>
</table>

<input id="answer">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2) Add the .emphasis class to your selector

$( 'tr.problem_display_work:last td:first .emphasis' ).contents().unwrap();
.emphasis {
  background: orange;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0 2px;
}
td {
  border: solid 1px #999;
  padding: 2px 8px;
}
<table>
  <tr class="problem_display_work">
    <td>1 + 1 = <span class="emphasis">2</span></td>
    <td>2 + 2 = <span class="emphasis">4</span></td>
  </tr>
  <tr class="problem_display_work">
    <td>3 + 3 = <span class="emphasis">6</span></td>
    <td>4 + 4 = <span class="emphasis">8</span></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1) Use the .find() method

selectorAnswer = $( 'tr.problem_display_work:last td:first' );
selectorAnswer.find( '.emphasis' ).contents().unwrap();

Upvotes: 2

Aswathy S
Aswathy S

Reputation: 729

Your question is not clear.I understand that u want to remove 'emphasis' class from all cells of a table . The solution is..

$('tr.problem_display_work:last td:first').removeClass("emphasis");

Upvotes: 0

Related Questions