JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="wt-items-host content" data-ng-controller="widget-editor.controllers.typeSelectorController" data-click-out="cancel" tabindex="0" style="right: -8px;"> <!----><div class="wt-type-box" data-ng-repeat="type in types" data-ng-click="ok(type)"> <div class="wt-type" data-ng-class="{'wt-type--selected': isSelected(type)}"> <span class="wt-icon-host"> <div class="wt-icon widget-type-icon widget-type-icon--svg" data-widget="manifests[type]"><span class="app-icon app-icon--widget-indicator" data-icon-name="'widget-indicator'">
                    <svg class="app-icon__svg">
                        <use xlink:href="#widget-indicator"></use>
                    </svg>
                </span></div> </span> <span class="wt-cap" data-ng-bind="(manifests[type] | wtypeName)">Indicator</span> <span class="wt-icon-select"></span> </div> </div><!----><div class="wt-type-box" data-ng-repeat="type in types" data-ng-click="ok(type)"> <div class="wt-type" data-ng-class="{'wt-type--selected': isSelected(type)}"> <span class="wt-icon-host"> <div class="wt-icon widget-type-icon widget-type-icon--svg" data-widget="manifests[type]"><span class="app-icon app-icon--widget-pie-chart" data-icon-name="'widget-pie-chart'">
                    <svg class="app-icon__svg">
                        <use xlink:href="#widget-pie-chart"></use>
                    </svg>
                </span></div> </span> <span class="wt-cap" data-ng-bind="(manifests[type] | wtypeName)">Pie Chart</span> <span class="wt-icon-select"></span> </div> </div><!----><div class="wt-type-box" data-ng-repeat="type in types" data-ng-click="ok(type)"> <div class="wt-type" data-ng-class="{'wt-type--selected': isSelected(type)}"> <span class="wt-icon-host"> <div class="wt-icon widget-type-icon widget-type-icon--svg" data-widget="manifests[type]"><span class="app-icon app-icon--widget-column-chart" data-icon-name="'widget-column-chart'">
                    <svg class="app-icon__svg">
                        <use...

CSS

.wt-type-box {
  width: 300px;
  height: 40px;
  border: solid 1px black;
}

JavaScript

const testElement = document.createElement('div');
testElement.classList.add('selectorino');
document.body.appendChild(testElement);

const forbiddenContent = ['blox', 'rapid deckgl maps'];
const menu = document.querySelectorAll(`.wt-cap`); // .contains('Table').closest(`.wt-type-box`);
const menuElements = [...menu];
menuElements.forEach((element) => {
  const content = element.innerHTML;
  console.log('content', content);
  if (forbiddenContent.includes(content.toLowerCase())) {
		console.log('FORBIDDEN!', content);  
    // Get the parent Element
		const parent = element.closest(`.wt-type-box`);
    parent.style.display = 'none';
    
  }
});

/* console.log('m', m); */