JSFiddle - React, Tailwind, and code Playground

Select child views (ignoring embedded helpers)

by tonytlwu

HTML

<fl-helper id="target">
  <h3>Helper</h3>
  <div>Div 1</div>
  <div>Div 2</div>
  <div data-view="foo">
    <p>View (We're trying to highlight this view in red)</p>
    <fl-helper>
      <h3>Helper dropped in a view</h3>
      <div>Div 2.1</div>
      <div>Div 2.2</div>
      <div data-view="foo">
        <p>View in an embedded <code>&lt;fl-helper&gt;</code></p>
      </div>
    </fl-helper>
  </div>
</fl-helper>

CSS

fl-helper {
  display: block;
  padding: 15px;
  border: 1px solid #999;
}

[data-view] {
  background: rgba(51, 51, 51, 0.1);
  padding: 10px;
}

.selected {
  border: 1px solid red;
}

.selected-jquery {
  background: rgba(0, 0, 255, 0.1);
}

JavaScript

// https://stackoverflow.com/questions/38469830
function getParents(element) {
  var result = [];
  var parent = element && element.parentElement;

	while (parent) {
    result.push(parent);
    parent = parent.parentElement;
  }

	return result;
}

/* Vanilla method */

var target = document.getElementById("target");
var allMatchingElements = target.querySelectorAll('[data-view]');
var result = Array.prototype.filter.call(allMatchingElements, function(element) {
	return !getParents(element).some(function(parent) {
  	return parent.nodeName === 'FL-HELPER' && parent !== target;
  });
});

result.forEach(function(view) {
	view.classList.add('selected');
});

/* jQuery method */

var $target = $('#target');

$target.find('[data-view]').filter(function(view) {
  var $view = $(this);
  
  return !$view.parents().filter(function() {
  	return this.nodeName === 'FL-HELPER' && this !== $target.get(0);
  }).length;
}).addClass('selected-jquery');