Removing A Class From Value In An Tag

I have an tag with some HTML as the value. I want to remove any s that have the class of 'emphasis', but still retain the content in the . I

Solution 1:

Basic idea

//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 htmlvar temp = $("<div>").html(str);
//find the span and unwrap it
temp.find(".emphasis").contents().unwrap();
//get the html string without the spanvar updated = temp.html();
//display itconsole.log(updated);

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

other option is to just read .text() instead of .html() and it will strip all html.

Solution 2:

One approach in which multiple span elements with emphasis class might exist in the input value, can be like this;

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

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

Solution 3:

Try it:

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