$(document).ready(function(){
$(".final-step").text(" ");
}); <div class="final-step">i will be remove only <span class="">i will not remove</span> <i class="">me too</i></div>Try This May Be This Will Help You
$(document).ready(function(){
var f = $(".final-step").html();
var h = $(".final-step").contents().first();
var g = f.replace(h.text(), "");
$(".final-step").html(g)
});<div class="final-step">i will be remove only <span class="">i will not remove</span> <i class="">me too</i></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Here is a solution on a pure JS
const element = document.getElementsByClassName("final-step")[0]
let childNodes = element.childNodes
for (let node of childNodes){
if (node.nodeName == '#text'){
document.getElementsByClassName("final-step")[0].removeChild(node)
}
}
Here is a solution in JQuery. Is it what you needed?
$(document).ready(function(){
var text = $('.final-step span').text();
$(".final-step").text(text);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final-step">i will be remove only <span class="">i will not remove</span> <i class="">me too</i></div>