CODEWITHSUNDEEP
javascriptjquerydom
Mansoor Akhtar
Mansoor Akhtar

Reputation: 2316

Remove / (slash) from dom using jquery/javascript

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

Upvotes: 0

Views: 124

Answers (3)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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>

Upvotes: 0

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 1

Related Questions