Jquery - cannot select the parent div

Question

I hope this isn't a waste of time, however I have really been trying to figure this on out. Is it my syntax. I simply want to remove the parent div ".number-row" once the link with a class of ".remove-link" is clicked.

Thanks in advance

<script>
$(document).ready(function(){
    $(".remove-link").click(function() {
     $(this).parent(".number-row").hide();
    })
})
</script>

<div class="number-row" >
   <div class="number-column">
         <div class="label-row">
             Select Country:
         </div>
         <div class="input-row">
             <select>
                 <option>1</option>
                 <option>2</option>
             </select>
         </div>
         <div class="label-row">
             Select Toll Free or City:
         </div>
         <div class="input-row">
             <select>
                 <option>1</option>
                 <option>2</option>
             </select>
         </div>
         <div class="label-row">
             Select Your Number:
         </div>
         <div class="input-row">
             <select>
                 <option>1</option>
                 <option>2</option>
             </select>
         </div>
     </div>
   <div class="number-column">
         <div class="label-row">
             Select Country:
         </div>
         <div class="input-row">
             <select>
                 <option>1</option>
                 <option>2</option>
             </select>
         </div>
         <div class="label-row">
             Enter Number to Forward to:
         </div>
         <div class="input-row">
            <input type="text" name="forward_number" id="forward_number" />
         </div>
         <div class="number-row-options">
            <a class="save-link" href="#">Save</a>
            <a class="remove-link" href="#">Remove</a>
         </div>                    
     </div>                    
</div>

Answer 1

This should do it...

$(document).ready(function(){ 
    $(".remove-link").click(function() { 
     $(this).parent().parent().parent().hide();
    }) 
})

Note that this doesn't remove, which you requested; it simply hides it. You can use remove() instead of hide() to remove it from the DOM.

Answer 2

Try parents() instead of parent():

$(document).ready(function(){
    $(".remove-link").click(function() {
        $(this).parents(".number-row").eq(0).hide();
    })
})