Alexander Goodkind

noPo 2.x+ demo

6 February 2015

by Alexander Goodkind

noPo is a method of removing posts with a certain attribute. Usually it will traverse sibiling posts with the same tag name (for example <article> or <main>) and remove every element with a matching CSS class or data-attribute (html5).

There are 2 versions currently available. noPoClass and noPoAttr, noPoClass traverses a given tag name and removes the given CSS class that matches.

noP2 traverses a given tag name removes the any matching data-attribute that was given.

Both versions do the exact same thing however noPo can collide with templating systems that work with CSS classes (such as tumblr’s): If you have a theme that changes the column size (for example .one-column) and you tag a post .two-column you could have unintenional results with noPo.

This is the library code

You can see how noPoClass and noPoAttr uses the same data but handles it differently:

/*please be aware that important parts of the code have been left out intentionally */

(function($) {
	$.fn.noPo = function(tag, useData, dataAttr) { //pass the tag in
	    var noPoSelector = $(this); //set the variable noposelector to whatever the $ function was called on
	    if (tag == undefined) { //if tag is undefined run with defaults
	        tag = '.x';
	    }
	    if ($(this) < 1) { //if the selector length is undefined run with defaults
	        noPoSelector = $('.nopo');
	    }
	    noPoSelector.siblings(tag).each(function() { //remove tags from each sibiligin in the tag
	        $(this).toggle();
	    })
	    if (useData === true) {
	        $(this).siblings().each(function() {
	            if ($(this).data(dataAttr).indexOf(tag) > -1) {
	                $(this).toggle();
	            }
	        })
	    }
	    return this; //return ourself bc we want to be able to chain our function :')
	}
})(jQuery);

Example of noPoClass working:

element with class .X
element with class .T
element with class .G
element with class .G
element with class .P
element with class .L
element with class .X
element with class .T
element with class .S
element with class .S
element with class .T

html for the elements:

<article class="nopo x">element with class .X</article>
<article class="nopo t">element with class .T</article>
<article class="nopo g">element with class .G</article>
<article class="nopo g">element with class .G</article>
<article class="nopo p">element with class .P</article>
<article class="nopo l">element with class .L</article>
<article class="nopo x">element with class .X</article>
<article class="nopo t">element with class .T</article>
<article class="nopo s">element with class .S</article>
<article class="nopo s">element with class .S</article>
<article class="nopo t">element with class .T</article>

Example of noPoAttr working:

element with attribute containing "X"
element with attribute containing "T"
element with attribute containing "G"
element with attribute containing "G"
element with attribute containing "O"
element with attribute containing "L"
element with attribute containing "X"
element with attribute containing "T"
element with attribute containing "S"
element with attribute containing "S"
element with attribute containing "T"

html for the elements:

<article class="nop2" data-nopo-tags="x">element with attribute containing "X"</article>
<article class="nop2" data-nopo-tags="t">element with attribute containing "T"</article>
<article class="nop2" data-nopo-tags="g">element with attribute containing "G"</article>
<article class="nop2" data-nopo-tags="g">element with attribute containing "G"</article>
<article class="nop2" data-nopo-tags="o">element with attribute containing "O"</article>
<article class="nop2" data-nopo-tags="l">element with attribute containing "L"</article>
<article class="nop2" data-nopo-tags="x">element with attribute containing "X"</article>
<article class="nop2" data-nopo-tags="t">element with attribute containing "T"</article>
<article class="nop2" data-nopo-tags="s">element with attribute containing "S"</article>
<article class="nop2" data-nopo-tags="s">element with attribute containing "S"</article>
<article class="nop2" data-nopo-tags="t">element with attribute containing "T"</article>