Remove HTML elements from string with JQuery BEFORE adding to dom (no regex)?-CodePudding

I have a string passed from the backend that has tags I would live to remove from the result on the front end before appending the HTML to the dom. For the purposes here, I cannot modify the backend output as it's used elsewhere.

I have a JSFiddle here, I tried using $.parseHTML to create a dom element, then modifying it before appending. The modification is unfortunately not working as expected, as it's removing everything from the page.

https://jsfiddle.net/bohs36aj/1/

let status = "<b>Part 1: </b>  Not submitted.   <a class=\"btn vocbtn-round-corner btn-minier btn-danger jsExtendDeadlineBtn\" data-toggle=\"modal\" data-target=\"#extend-deadlines-modal\" data-userid=\"00000\" data-stepid=\"00000\">Extend submission window</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"confirmSubmitAsnBtn('../XXX/XXXX.php?X=*******&userid=00000&m=ta&stepid=000000&a=submitAssignmentStep&force=1&q1=id=00000&asn=00000&q3=showInfo=00000', 'Part 1 ')\" >Force submit: [workarea]</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"forceSubmitByUpload('','&asnid=00000&userid=000000',10)\">[upload]</a><br><div style=\"margin-top:10px !important\"></div><b>Part 2: </b>  Not submitted.   <a class=\"btn vocbtn-round-corner btn-minier btn-danger jsExtendDeadlineBtn\" data-toggle=\"modal\" data-target=\"#extend-deadlines-modal\" data-userid=\"00000\" data-stepid=\"000000\">Extend submission window</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"confirmSubmitAsnBtn('../XXX/XXXX.php?vockey=*******&userid=000000&m=ta&stepid=000000&a=submitAssignmentStep&force=1&q1=id=00000&asn=000000&q3=showInfo=000000', 'Part 2 ')\" >Force submit: [workarea]</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"forceSubmitByUpload('','&asnid=00000&userid=000000',10)\">[upload]</a>";


status = $.parseHTML(status);
/* following line removes EVERYTHING, I just want the <a> tag buttons gone */
/* status.find("a").remove(); */
$("#page").append(status);

CodePudding user response：

You were very close. First make an actual DOM element to work with then find the a elements, iterate them and then remove them.

let status = "<b>Part 1: </b>  Not submitted.   <a class=\"btn vocbtn-round-corner btn-minier btn-danger jsExtendDeadlineBtn\" data-toggle=\"modal\" data-target=\"#extend-deadlines-modal\" data-userid=\"00000\" data-stepid=\"00000\">Extend submission window</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"confirmSubmitAsnBtn('../XXX/XXXX.php?X=*******&userid=00000&m=ta&stepid=000000&a=submitAssignmentStep&force=1&q1=id=00000&asn=00000&q3=showInfo=00000', 'Part 1 ')\" >Force submit: [workarea]</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"forceSubmitByUpload('','&asnid=00000&userid=000000',10)\">[upload]</a><br><div style=\"margin-top:10px !important\"></div><b>Part 2: </b>  Not submitted.   <a class=\"btn vocbtn-round-corner btn-minier btn-danger jsExtendDeadlineBtn\" data-toggle=\"modal\" data-target=\"#extend-deadlines-modal\" data-userid=\"00000\" data-stepid=\"000000\">Extend submission window</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"confirmSubmitAsnBtn('../XXX/XXXX.php?vockey=*******&userid=000000&m=ta&stepid=000000&a=submitAssignmentStep&force=1&q1=id=00000&asn=000000&q3=showInfo=000000', 'Part 2 ')\" >Force submit: [workarea]</a><a class=\"btn vocbtn-round-corner btn-minier btn-danger\" onclick=\"forceSubmitByUpload('','&asnid=00000&userid=000000',10)\">[upload]</a>";

/*Create an acutal element to work with*/
status = $("<div/>").html($.parseHTML(status));
/*Find each "a" and remove it*/
$(status).find("a").each(function(){$(this).remove()});
/*Append the modified element*/
$("#page").append(status);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="page">

</div>