-1

I've html code with a comma between it. I need to remove this comma. I tried different ways but could not do it.

can anyone please help me to remove this comma.

below is the code:

    <div class="crm-content">
      <div class="location vcard"><span class="adr">
        <span class="street-address">45 ABC Road</span><br>
        <span class="extended-address">test1</span><br>
        test2<br>
        <span class="locality">xyz<br></span>
        , 
        <span class="region">Berkshire<br></span>
        <span class="postal-code">AB4 3DK</span><br>
        <span class="country-name">United Kingdom</span></span>
      </div>
    </div>

comma is after <span class="locality">

edit:

code I've tried using replace all. which is not working

console.log( document.querySelector('div.crm-content'));
result = document.querySelector('div.crm-content');

content = result.replaceAll(",$", "");
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Developer
  • 3,857
  • 4
  • 37
  • 47
  • 1
    Show us the code you tried that didn't work please, otherwise it seems like you're just asking the community to do your work for you. – j08691 Mar 16 '17 at 17:38
  • 1
    read about `childNodes` and `nextSibling` – Flash Thunder Mar 16 '17 at 17:39
  • i've tried with replace all. adding my code to the question – Developer Mar 16 '17 at 17:41
  • Thanks for pointing to the other question. that removes all the text between elements. in this scenario I only want to remove this comma, elements vary for different users(all spans will not be available all the time). anyhow thanks for help. I'll try. – Developer Mar 16 '17 at 17:59

2 Answers2

0

You can hide the comma with zero font size on the parent div element, then reset the preferred font size on the child span elements:

div.location {
  font-size: 0;
}
div.location span {
  font-size: 12px;
}
Peter Cadwell
  • 109
  • 1
  • 5
0

If the comma is always in the same spot, you can do:

$('span.locality').get(0).nextSibling.remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="crm-content">
  <div class="location vcard"><span class="adr">
        <span class="street-address">45 ABC Road</span><br>
    <span class="extended-address">test1</span><br> test2
    <br>
    <span class="locality">xyz<br></span> ,
    <span class="region">Berkshire<br></span>
    <span class="postal-code">AB4 3DK</span><br>
    <span class="country-name">United Kingdom</span></span>
  </div>
</div>

The .get(0) gets the DOM node which enables you to use .nextSibling to get the text node after it, which contains your comma, and then remove it.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Thank you very much for this. but i'm using on click function to do this. on every click its removing next element. :( – Developer Mar 16 '17 at 17:47
  • So instead of `.click()` use `.one()` so that it only runs once. Or unbind the click after you do it the first time. – j08691 Mar 16 '17 at 17:47
  • I'm implementing this for copy to clipboard functionality. on this page user will have multiple addresses for copying. user may try several times. tried using `.one` samething happeningin this scenario. – Developer Mar 16 '17 at 17:51