Remove item after max reached w/jQuery
<p>OK, I am trying to clone table with 3 elements in it. After I make 3 clones I need to continue cloning but remove item <strong>.val3</strong>.</p>

<pre><code>$('a').click(function(e) {
    var $table = $(this).prev();
    $table.after($table.clone());
    e.preventDefault();

    var n = $(".val3").length;

    if (n &gt; 3) {
        if (!$(".val3").hasClass("max3")) {
            $(".val3").remove();
        }
    } else {
        $(".val3").addClass("max3");
    }
});

&lt;table border="1"&gt; 
&lt;tr&gt; 
  &lt;td&gt;
  &lt;div class="val1"&gt;val 1&lt;/div&gt;
  &lt;div class="val2"&gt;val 2&lt;/div&gt;
  &lt;div class="val3"&gt;val 3&lt;/div&gt;
  &lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt;
&lt;a href="#"&gt;copy&lt;/a&gt;
</code></pre>

<p>I decided that I'll add a class to the first 3 and then check if the class does not exist, remove the div. I think i got lost in my own logic... </p>

<p>Here's <a href="http://jsfiddle.net/uR7Aw/" rel="nofollow">jfiddle I put as a demo</a>.</p>
