JSFiddle - React, Tailwind, and code Playground

by Sergei Marochkin

HTML

<p>
  <div>
    <div>
      <span>Hello</span>
    </div>
    <span>Hello Again</span>
  </div>
  <div>
    <span>And Hello Again</span>
  </div>
</p>
<b>Click Hellos to toggle their parents.</b>

CSS

p, div, span {
  margin: 2px;
  padding: 1px;
}
div {
  border: 2px white solid;
}
span {
  cursor: pointer;
  font-size: 12px;
}
.selected {
  color: blue;
}
b {
  color: red;
  display: block;
  font-size: 14px;
}

JavaScript

Element.prototype.parents = function(selector) {
	var elements = [];
	var elem = this;
	var ishaveselector = selector !== undefined;
	
	while ((elem = elem.parentElement) !== null) {
		if (elem.nodeType !== Node.ELEMENT_NODE) {
			continue;
		}

		if (!ishaveselector || elem.matches(selector)) {
			elements.push(elem);
		}
	}

	return elements;
};

[].forEach.call(document.querySelectorAll('span'), function(span) {
	span.addEventListener('click', function() {
		this.classList.toggle('selected');

		[].forEach.call(document.querySelectorAll('div'), function(element) {
			element.style.borderColor = 'white';
		});

		var length = 0;

		[].forEach.call(document.querySelectorAll('span.selected'), function(element) {
			[].forEach.call(element.parents('div'), function(elem) {
				elem.style.border = '2px red solid';
			});
			length += element.parents('div').length;
		});

		document.querySelector('b').innerHTML = 'Unique div parents: ' + length;
	});
});