Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'd suggest:</p> <pre><code>function idProgress (e) { var self = this, id = self.id, next = self.nextElementSibling; if (next === null) { // this assumes you don't want to remove the last element return false; } else { self.parentNode.removeChild(self); next.id = id; next.addEventListener(e.type, idProgress); } } var span = document.getElementById('current'); span.addEventListener('click', idProgress); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/R4SMM/" rel="nofollow">JS Fiddle demo</a>.</p> <p>To remove all the <code>span</code> elements click-by-click (including the last):</p> <pre><code>function idProgress (e) { var self = this, id = self.id, next = self.nextElementSibling; self.parentNode.removeChild(self); if (next !== null) { next.id = id; next.addEventListener(e.type, idProgress); } } var span = document.getElementById('current'); span.addEventListener('click', idProgress); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/R4SMM/4/" rel="nofollow">JS Fiddle demo</a>.</p> <p>To use <code>keypress</code> rather than <code>click</code> (which I overlooked on first reading the question):</p> <pre><code>function idProgress (e) { var self = this.getElementById('current'), id = self.id, next = self.nextElementSibling, key = e.which; if (key !== 110 || next === null) { return false; } else { self.parentNode.removeChild(self); next.id = id; } } document.addEventListener('keypress', idProgress); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/R4SMM/2/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Or:</p> <pre><code>function idProgress(e) { var self = this.getElementById('current'), id = self.id, next = self.nextElementSibling, key = e.which; if (key == 110) { self.parentNode.removeChild(self); if (next !== null) { next.id = id; } } } document.addEventListener('keypress', idProgress); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/R4SMM/3/" rel="nofollow">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li><a href="https://developer.mozilla.org/es/docs/DOM/elemento.addEventListener" rel="nofollow"><code>element.addEventListener()</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/event.which?redirectlocale=en-US&amp;redirectslug=DOM%2Fevent.which" rel="nofollow"><code>event.which</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementTraversal.nextElementSibling" rel="nofollow"><code>nextElementSibling</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.parentNode" rel="nofollow"><code>parentNode</code></a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild" rel="nofollow"><code>removeChild()</code></a>.</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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    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