I have dom structure like
<div class="container">
<span> test1 </span>
/
<span> test2 </span>
/
<span> test3 </span>
</div>
which produces output like
test1/test2/test3
i am able to remove the span .. but not able to remove the slash from dom.. can any one please help me to remove the slash from dom so i can get output like
test1test2test3
You can get all .contents() of the element including Node.TEXT_NODE afterwards .filter() can be used to get text nodes then use .remove().
$('.container').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE
}).remove();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span>test1</span> /
<span>test2</span> /
<span>test3</span>
</div>You can iteratate .childNodes of parent .container element, check if .textContent of current node contains "/", if true call .parentElement.removeChild with current node as parameter.
var container = document.querySelector(".container");
for (let node of container.childNodes) {
if (node.textContent.indexOf("/") > -1) {
node.parentElement.removeChild(node)
}
}<div class="container">
<span> test1 </span> /
<span> test2 </span> /
<span> test3 </span>
</div>You can make use of children() function and edit the container HTML.
var $container = $('.container');
$container.html($container.children());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span>test1</span>
/
<span>test2</span>
/
<span>test3</span>
</div>
$('span').text()?