JSFiddle - React, Tailwind, and code Playground

by g30rg3

HTML

<div>
    <p>Tri color cirles have node class but no advertising filetags. Red circle has node class and 'PAST ADVERTISING' filetag. Green circle has node class and 'CURRENT ADVERTISING' filetag</p>
</div>
<div class="original">
    <h3>Original</h3>
<svg>
    <circle class="node" style="cursor: pointer; fill: rgb(171, 183, 71); display: block;" title="Title" r="6.345236822911981" fileTags="BRAND, CURRENT ADVERTISING" fileType="Print" fileDescription="Example" cx="533.5761873699519" cy="344.6269837191289"></circle>
    <circle id="986" class="node" style="cursor: pointer; fill: red; display: block;" title="Title" r="6.345236822911981" fileTags="BRAND, PAST ADVERTISING" fileType="Print" fileDescription="Example" cx="433.5761873699519" cy="344.6269837191289"></circle>
        <circle class="node" cx="70" cy="70" r="60" fill="magenta"></circle>
    <circle class="node" cx="130" cy="70" r="60" fill="cyan"></circle>
    <circle class="node" cx="100" cy="130" r="60" fill="yellow"></circle>
</svg>    
</div>
<div class="modified">
    <h3>Modified</h3>
<svg>
    <circle class="node" style="cursor: pointer; fill: rgb(171, 183, 71); display: block;" title="Title" r="6.345236822911981" fileTags="BRAND, CURRENT ADVERTISING" fileType="Print" fileDescription="Example" cx="533.5761873699519" cy="344.6269837191289"></circle>
    <circle id="986" class="node" style="cursor: pointer; fill: red; display: block;" title="Title" r="6.345236822911981" fileTags="BRAND, PAST ADVERTISING" fileType="Print" fileDescription="Example" cx="433.5761873699519" cy="344.6269837191289"></circle>
        <circle class="node" cx="70" cy="70" r="60" fill="magenta"></circle>
    <circle class="node" cx="130" cy="70" r="60" fill="cyan"></circle>
    <circle class="node" cx="100" cy="130" r="60" fill="yellow"></circle>
</svg>
</div>

CSS

svg{
height:450px;
}

JavaScript

$( ".modified .node[fileTags*='PAST ADVERTISING']" ).css("display", "none");
$( ".modified .node[fileTags*='CURRENT ADVERTISING']" ).css("display", "inline");
//$( ".modified .node:not([fileTags*='ADVERTISING'])" ).css("display", "none");
$( ".modified .node").not("[fileTags*='ADVERTISING']").css("display", "none");