JavaScript - target a string between two elements

Greg Holmes

I want to manipulate some HTML that I have no direct control over.

There are two elements that I could target with JavaScript, and then some ... well, sort of floating text between them.

    <div id="anOuterDiv">

  <div class="variousOtherElements">blah can contain dashes - oh yes it can</div>

  <div class="someOtherElements">blah can contain dashes - oh yes it can</div>

  <span class="branch">Some City Public Library</span> - <span class="location">Story Room</span>

</div>

Basically, I just need to remove or hide span.branch and span.location ... AND the dash between them. Right now I'm hiding the two spans via CSS, and the dash is just floating out there ...

The content of all elements can vary. There can be dashes in the other elements.

Either a jQuery or pure JavaScript solution would be useful. I have not been able to figure out a way to target this dash that is just hanging out there. I need to hide it and have it not take up space.

vol7ron

You could wrap the elements with branch and location classes in a new div (container of their own), along with any siblings in between. You can then hide or remove them as desired:

see Plunkr

$(document).ready(function() {
  
  $('.branch').each(function() {

    var to_wrap   = [this];
    var _sib      = this;
    var _continue = true;

    while (_continue && (_sib = _sib.nextSibling) && (_sib.className === undefined || _sib.className == 'location')) {
      to_wrap[to_wrap.length] = _sib;

      if (_sib.className == 'location')
        _continue = false;
    }

    buildHiddenDivRow(to_wrap, $(this).parent());

  });

});


function buildHiddenDivRow(arr, $parentElement) {
  $('<div />', {
    'class': 'branch-location',
    'style': 'display:none'
  }).prepend(arr).appendTo($parentElement);
}

I didn't give the algorithm much thought, but I did clean it up some. I'm sure there is plenty of room for optimization and making it more concise and/or readable.

Caveats:

  1. this does not preserve ordering, it only puts it at the end of the container, anOuterDiv
  2. it doesn't look for textnodes or any elements specifically, it looks for an exact match by className. If the element with location class has an additional class (e.g., class="location span"), or there is no element that has a location class, this will result in an infinite-loop and hang the browser.

For these reasons and more, use this as a reference and not production-ready code.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Target every two elements - Javascript / jQuery

From Dev

Switching between two div elements using Javascript

From Dev

Switching between two div elements using Javascript

From Dev

get string between two strings with javascript

From Dev

Finding the difference between two string in Javascript with regex

From Dev

Get the substring between two substrings in a string [Javascript]

From Dev

How to select text between two string javascript?

From Dev

find non- common elements between two string arrays

From Dev

find non- common elements between two string arrays

From Dev

C#_How to Multiply elements between Two string

From Dev

Get first occurrence of string between two string in Javascript

From Dev

Cutting two string elements

From Dev

specify two elements with one target selector

From Dev

How to target two elements with one click?

From Dev

specify two elements with one target selector

From Dev

OR condition jQuery to target two different elements on mousedown

From Dev

javascript: return a string similarity score between two strings

From Dev

Javascript Regular expression error in get string between two strings

From Dev

How To get Many string between two specific characters in Javascript

From Dev

Javascript regex - get string between two matches, multiple times

From Dev

JavaScript: Extract part of string between two optional characters with Regex

From Dev

JavaScript Regexp between two strings without capturing first string

From Dev

javascript regexp find multiple match between two string

From Dev

Determine the relationship between two elements

From Dev

Two common elements between lists

From Dev

checking if elements of source string is part of target

From Dev

Target one letter in a string with javascript

From Dev

Target one letter in a string with javascript

From Dev

HTML Parsing: Get elements between two elements?

Related Related

  1. 1

    Target every two elements - Javascript / jQuery

  2. 2

    Switching between two div elements using Javascript

  3. 3

    Switching between two div elements using Javascript

  4. 4

    get string between two strings with javascript

  5. 5

    Finding the difference between two string in Javascript with regex

  6. 6

    Get the substring between two substrings in a string [Javascript]

  7. 7

    How to select text between two string javascript?

  8. 8

    find non- common elements between two string arrays

  9. 9

    find non- common elements between two string arrays

  10. 10

    C#_How to Multiply elements between Two string

  11. 11

    Get first occurrence of string between two string in Javascript

  12. 12

    Cutting two string elements

  13. 13

    specify two elements with one target selector

  14. 14

    How to target two elements with one click?

  15. 15

    specify two elements with one target selector

  16. 16

    OR condition jQuery to target two different elements on mousedown

  17. 17

    javascript: return a string similarity score between two strings

  18. 18

    Javascript Regular expression error in get string between two strings

  19. 19

    How To get Many string between two specific characters in Javascript

  20. 20

    Javascript regex - get string between two matches, multiple times

  21. 21

    JavaScript: Extract part of string between two optional characters with Regex

  22. 22

    JavaScript Regexp between two strings without capturing first string

  23. 23

    javascript regexp find multiple match between two string

  24. 24

    Determine the relationship between two elements

  25. 25

    Two common elements between lists

  26. 26

    checking if elements of source string is part of target

  27. 27

    Target one letter in a string with javascript

  28. 28

    Target one letter in a string with javascript

  29. 29

    HTML Parsing: Get elements between two elements?

HotTag

Archive