looping through new div as they are created

Question

I have a div, let's call it class="phoneNo". Inside the div there are two links, one to add another div just like it, and another to delete the div itself. I'm trying to create a loop where if there's only 1 of these divs, the "delete" link should hide, and if there are more than 1 of these divs, the "delete" link should show up on all the divs.

So far I came up with this, but no success:

var pCount = $(".phoneNo").length;
                $(pCount).each(function(){
                    if (pCount <= 1) {
                        $("a.deleteThis").hide();
                     } 
                     else if (pCount >= 1) {
                        $("a.deleteThis").show();
                     }
                     return true;
                });

EDIT (3.21.10):

According to jWhiz's advice below, I reworked what I have. The code is error-free and everything works, except for the hiding/showing of the "Delete" link.

Here's my code (some points are irrelevant to the problem, but may help rework my logic flow):

function checkHide() {
                    if ($(".phoneNo").length == 1)
                      $(".deleteThisPhone").hide();
                    else
                      $(".deleteThisPhone").show();
                  }
                //adding and deleting phone numbers in popup
                $(".addNewPhone").live("click", function(){
                    clicked = $(this);
                    grandFather = clicked.parent().parent();
                    cloneCurr = grandFather.clone(true).find("input").each(function(){
                        $(this).val("")        
                    }).end().animate({opacity:"show"})
                    grandFather.after(cloneCurr)
                    checkHide();
                    newHeight = $("#fancybox-wrap").height();
                    $('#fancybox-wrap').css({"height": newHeight + 66 + "px" });
                        return false
                });
                $(".deleteThisPhone").live("click",function(){
                    $(this).parent().parent().slideUp(150);
                    newHeight = $("#fancybox-wrap").height();
                    $('#fancybox-wrap').css({"height": newHeight - 66 + "px" });
                    checkHide();
                });

Answer 1

The problem with your code is that you're storing an int into pCount, and then trying to get a jQuery object of that int. I would think of it a little differently. Remember you can chain your selectors with spaces to scope them within parents.

if ($(".phoneNo").length == 1)
  $(".phoneNo a.deleteThis").hide();
else
  $(".phoneNo a.deleteThis").show();

Update

Make sure to run the above logic everytime you create or delete a phoneNo.

<div class="phoneNoCollection">
  <div class="phoneNo">
    <input type="text" name="phoneNo" value="123 456 7890"/>
    <a class="deleteThis">Delete</a>
    <a class="add">Add another</a>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    // initial setup
    $(".phoneNo .deleteThis").click(removeParent);
    $(".phoneNo .add").click(appendPhoneNo);
    checHide();
  });

  function checkHide() {
    // logic from above
    if ($(".phoneNo").length == 1)
      $(".phoneNo a.deleteThis").hide();
    else
      $(".phoneNo a.deleteThis").show();
  }

  function removeParent(e) {
    $(e.target.parent).remove();
    checkHide();
  }

  function appendPhoneNo() {
    var el$ = $("<div class='phoneNo'><input type='text' name='phoneNo'/>" + 
      "<a class='deleteThis'>Remove</a><a class='add'>Add another</a></div>"));
    $el.child(".deleteThis").click(removeParent);
    $el.child(".add").click(appendPhoneNo);
    $el.appendTo(".phoneNoCollection");
    checkHide();
  }
</script>

Answer 2

$(pCount).each is not going to be a valid selector, it is an interger from the lenght.

$(".phoneNo").each(...