Удалить элемент перед вставкой с помощью jquery

Question

Как удалить диапазон с дочерним интервалом из #data, так что #result содержит «Только текст слева»?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="data">Only text left <span class='price'>remove this<span> €0,00</span> </span> 
 
</div> 
 
<div id="result"></div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    var nhtml = $('#data').html(); 
 
    $('#result').html(nhtml); 
 
    }); 
 
</script>

Answer 1

текст фильтра узлов из него с помощью contents() и filter(), а затем получить содержание текста по text()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="data">Only text left <span class='price'>remove this<span> €0,00</span> </span> 
 
</div> 
 
<div id="result"></div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    var nhtml = $('#data') 
 
     .contents() // get all child nodes including text and comment node 
 
     .filter(function() { 
 
     return this.nodeType == 3; // filter text node from it 
 
     }).text(); // get the text content from it 
 
    $('#result').html(nhtml); 
 
    }); 
 
</script>

---

Или клонировать элемент, используя clone() и удалить промежуток, а затем получить содержимое HTML функции

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="data">Only text left <span class='price'>remove this<span> €0,00</span> </span> 
 
</div> 
 
<div id="result"></div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    var nhtml = $('#data') 
 
     .clone() // clone the element 
 
     .find('.price') // get the span 
 
     .remove() // remove the span 
 
     .end() // back to cloned element 
 
     .html(); // get the html content from cloned element 
 
    $('#result').html(nhtml); 
 
    }); 
 
</script>

Answer 2

Я использовал .remove(), чтобы удалить его , вы можете ссылаться на ссылку на скрипку ниже

$(document).ready(function() { 
 
$(".price").remove(); 
 
    var nhtml = $('#data').html(); 
 
    $('#result').html(nhtml); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="data">Only text left <span class='price'>remove this<span> €0,00</span> </span> </div> 
 
<div id="result"> </div>

Jsfiddle link for solution