从 <input> 标记中的值中删除一个类

Question

我有一个 <input> 标记，其中包含一些 HTML 作为值。我想删除任何具有“强调”类的<span>s，但仍保留<span> 中的内容。我也不想删除任何其他<span>s。

以下示例：

这个：

<input type="hidden" name="answer" id="answer" value="<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>"

最终应该是：

<input type="hidden" name="answer" id="answer" value="<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>"`

我已经尝试在这个小提琴中使用 jQuery (https://jsfiddle.net/0xgx04pq/4/)...

function remove_emphasis_class (){
  var content = $('#answer').val(answer);
  var content_after = content.filter('span.emphasis').contents().unwrap();
  $('#answer').val(content_after);
  alert(content_after);
}

.emphasis {
  background: orange;
  font-weight: bold;
}

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

<input type="hidden" value="2 + 5 = <span class='emphasis'>7</span>" name="answer" id="answer">
<br><br>
<button onclick="remove_emphasis_class();">Remove Class</button>

...但它不起作用。 content_after 最终返回为“[object Object]”有什么想法吗？

Answer 1

基本思路

//using string instead of reading value of the input aka var str = $(".foo").val();
var str = "2 + 5 = <span class='emphasis'>7</span>";
//convert the string to html
var temp = $("<div>").html(str);
//find the span and unwrap it
temp.find(".emphasis").contents().unwrap();
//get the html string without the span
var updated = temp.html();
//display it
console.log(updated);

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

另一种选择是只读取 .text() 而不是 .html() 它将删除所有 html。

Answer 2

输入值中可能存在多个具有emphasis类的span元素的一种方法可以是这样的；

var tempDir = document.createElement("div"),
        inp = document.getElementById("answer"),
    els2del,
    content = "";
tempDir.innerHTML = inp.value;
els2del = tempDir.querySelectorAll("span[class = 'emphasis']");
for (var i = 0; i < els2del.length; i++){
  content += els2del[i].innerHTML;
}
inp.value = content;
console.log(inp.value);

<input type="hidden" name="answer" id="answer" value="<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>">

Answer 3

试试看：

function remove_emphasis_class (){
        var answer = document.querySelector('#answer').value;
    var div = document.createElement("div");
    div.innerHTML = answer;
        var selector = div.querySelector('.emphasis');
    var newContent = selector.innerHTML;
    div.querySelector('.emphasis').outerHTML = newContent;
    console.log(div.innerHTML);
}