<input>タグ内の値からクラスを削除する

Question

<input>タグに値をHTMLで指定しました。 「emphas」のクラスを持つ<span>を削除しますが、内容はまだ<span>に残ります。私はまた他の<span>を削除したくない。

、以下の例：

この：よう

<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>" 

が終わる必要があります：私はこのフィドル（https://jsfiddle.net/0xgx04pq/4/）でのjQueryを使用してみました

<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>"` 

...

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は「[オブジェクトオブジェクト]」として戻ってきます。

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

は、それを試してみてください。

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

Answer 3

emphasisクラスの複数のスパン要素が入力値に存在する可能性がある1つの方法は、次のようになります。最高のは、HTMLに変換し、それを照会し、それを削除した後、もう一度入力値を設定することです

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>">