使用 jQuery 的 unwrap() 删除 class

Question

我想从 table 的特定单元格中具有 class 的所有标签中删除 emphasis 的 class。我正在选择这样的 table 单元格内容：

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

在代码的另一个地方，我这样使用 unwrap()：

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

但是，我不确定如何将两者结合起来。我试过了，但失败了：

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

有什么想法吗？

编辑澄清 #1：我想将 HTML 保留在标签内。所以，如果我有： 14 + 6 = <span class="emphasis">20</span> 我想以 14 + 6 = 20.

结束

编辑澄清 #2：有问题的 HTML 被设置为隐藏 <input> 字段的值，例如 $('#answer').val(answer);。 Gleb Kemarsky 的解决方案很好，但由于某种原因它没有应用输入字段的值。

编辑澄清 #3...

我有一个包含一些行和单元格的 <table>。在最后一行的第一个单元格中，我有一些内容（例如 14 + 6 = <span class="emphasis">20</span>）。

我使用 var answer = $('tr.problem_display_work:last td:first').html(); 获取该单元格的 HTML，然后我使用 $('#answer').val(answer); 更新隐藏的 <input id="answer"> 的值。

发生这种情况时，我想将 14 + 6 = <span class="emphasis">20</span> 变成 14 + 6 = 20 作为隐藏 <input id="answer"> 的值，但在 table.

编辑澄清 #4...

关键是删除任何 emphasis 的 class 的 <span>。

这个.. <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>

最终应该是... <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>

Answer 1

您的问题不是 clear.I 了解您想要从 table 的所有单元格中删除 'emphasis' class。解决方案是..

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

Answer 2

如何从答案中删除 `<span>` 标签

5) 创建 HTML 元素的副本并应用 `.unwrap()` 方法

同样的问题。

4) 从答案中删除 `<span class="emphasis"></span>`（没有嵌套标签）

var answer = $( 'tr.problem_display_work:last td:first' ).html();
$( '#answer' ).val( answer.replace( /<span class="emphasis">(.*?)<\/span>/g, '' ) );

.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) 从 the `.replace()` method

的答案中删除所有 html-标签

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) 添加 `.emphasis` class 到您的选择器

$( '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) 使用the `.find()` method

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

使用 jQuery 的 unwrap() 删除 class

Using jQuery's unwrap() to remove a class

jquery

unwrap

如何从答案中删除 <span> 标签

5) 创建 HTML 元素的副本并应用 .unwrap() 方法

4) 从答案中删除 <span class="emphasis"></span>（没有嵌套标签）

3) 从 the .replace() method