Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>My first thoughts would be to use CSS directly:</p> <pre><code>p:nth-child(n + 3) { display: none; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/KGPZ5/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Or using plain JavaScript:</p> <pre><code>var pElems = document.getElementsByTagName('p'); for (var i = 2, len = pElems.length; i &lt; len; i++) { pElems[i].style.display = 'none'; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/KGPZ5/1/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Of course, just because it's possible (and yes, you <em>can</em> do this, but that doesn't mean you <em>should</em>), we could also extend the <code>Array</code> prototype, and make use of <code>slice</code>, and <code>call</code>:</p> <pre><code>Array.prototype.css = function (prop,val) { var self = this; for (var i = 0, len = self.length; i &lt; len; i++) { self[i].style[prop] = val; } return self; }; [].slice.call(document.getElementsByTagName('p'), 2).css('display','none'); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/KGPZ5/2/" rel="nofollow">JS Fiddle demo</a>.</p> <hr /> <p><strong>Edited</strong> in response to question, left in the comments (below), by the OP:</p> <blockquote> <p>what would be the shortest [JavaScript] to hide just the last one <code>&lt;p&gt;</code>?</p> </blockquote> <p>I don't often enter into 'shortest' competitions (redolent of code golf, though the techniques are often impressive); however the <em>simplest</em> approach is as-written in the comment:</p> <pre><code>var pArray = document.getElementsByTagName("p"); pArray[pArray.length-1].style.display="none"; </code></pre> <p>I originally suggested using <code>pop()</code> (forgetting that a <code>NodeList</code> doesn't have a <code>pop()</code> method) So, to further the above prototype-extending approach (and avoiding re-creating <code>pop()</code>, mainly because <code>slice()</code> seemed to be far more useful in later situations:</p> <pre><code>Array.prototype.css = function (prop,val) { var self = this; for (var i = 0, len = self.length; i &lt; len; i++) { self[i].style[prop] = val; } return self; }; NodeList.prototype.slice = function (a,b) { return [].slice.call(this, a, b); } var pArray = document.getElementsByTagName("p"); pArray.slice(-1).css('display','none'); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/GFRyL/3/" rel="nofollow">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li>CSS: <ul> <li><a href="http://www.w3.org/TR/selectors/#nth-child-pseudo" rel="nofollow"><code>:nth-child()</code> pseudo-class</a>.</li> </ul></li> <li>JavaScript: <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" rel="nofollow"><code>Array.slice()</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" rel="nofollow"><code>Function.prototype.call()</code></a>.</li> </ul></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload