Jquery - невозможно выбрать родительский div

Я надеюсь, что это не пустая трата времени, однако я действительно пытался понять это. Это мой синтаксис. Я просто хочу удалить родительский div «.number-row» после того, как будет нажата ссылка с классом «.remove-link».

заранее спасибо

<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>