Skip to content
Advertisement

Hide elements that don’t match value from input field and keep only ones that have it

I’m doing a small project where I’m searching for words in collapsed elements. If found, some collapsed elements are opening to display the word.

The next thing I would like to achieve is to keep only the li that contain it and hide the others.

I’m not sure how to proceed further to achieve this. What I’ve tried, hides exactly the element found which in fact, I want to keep. I might need a loop but I’m not sure how to write it.

Everything happens here:

function showWordsFound() {
        const word = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');
        const r = new RegExp("(" + word + ")", "ig");
        $(".reports-list-item__title--compendium").each(function(i) {
            if ($(this).text().match(r)) {
                let matches = $(this).text().match(r);
                console.log(matches);
                console.log(typeof matches);
                $.each(matches, function () {
                    occurrences.push(i);
                });
                // hide element not matching the word found
                // $(this).parent().hide();
                $(this).closest(".timeline-compendium__content").collapse("show");
                $(this).closest(".timeline-type .timeline-type__content").collapse("show");
            }            
        });
    }

Can someone help me clarify this?

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("(" + word + ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i) {
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          // console.log(occurrences);
        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});
.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Advertisement

Answer

You can get the current item and make all the items to hide first and then display the matched list item like,

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.*+?^${}()|[]\]/g, '\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("(" + word + ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i, el) {
       el.parentNode.parentNode.style.display = "none"
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          el.parentNode.parentNode.style.display = "list-item"

        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});
.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

This line el.parentNode.parentNode will select the respective <li> ... </li> element.

Advertisement