$(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>Prueba esto Puede ser esto te ayudará
$(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>Aquí hay una solución en un JS puro
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) } }Aquí hay una solución en JQuery. ¿Es lo que necesitabas?
$(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>