Jquery ocultar boton

Buenas tardes! Necesito ayuda con un codigo que estoy implementando..
Hago una consulta mysql y mediante un while imprimo la tabla y cada registro lo coloco dentro de un form para luego interactuar con el:

Código PHP :

echo "<form action='' method='' enctype='multipart/form-data' class="form" name='fo3'>";
echo "  
<tr> 
<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>  
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>  
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
</tr>";  
echo "</form>";

a su vez esto lo envio por ajax, y lo que necesito es que cuando lo envie me oculte el boton enviar para que luego salga otro mensaje que diga "Agregado". Tengo el siguiente codigo pero no logro ocultarlo.. sabran cual sera mi error.. lo pase por consola y no me marca nada, pero el boton sigue ahi.
Este es el codigo:

Código Javascript :

$(document).ready(function() {
            $().ajaxStart(function() {
               $('#loading').show();
               $('#result').hide();
            }).ajaxStop(function() {
               $('#loading').hide();
               $('#result').fadeIn('slow');
            });
            $('.form').submit(function() {
               $this = $(this);
               $.ajax({
                  type: 'POST',
                  url: 'pedido.php',
                  data: $(this).serialize(),
                  success: function(data) {
                        $this.find('input[type=submit]').hide();
                  }   
               })
               return false;
            });
         })

Si uso el siguiente codigo, fuera del success me lo oculta aunque no haya completado el formulario, y si lo uso adentro del success en el primer envio no lo oculta pero luego si, aunque no haya completado el formulario..

$('input[id^="enviar"]').click(function(){
var id = $(this).css('display','none');
});

Alguna idea de porque puede ser.. muchas gracias

Bueno he dado con el resultado al menos por ahora, je, lo seguire probando... al codigo quepuse le agrege $this.parent().find("input[type=submit]").hide();
Lo busque por otro foro... de JQuery nose mucho, y veo que tengo que ponerme a estudiar sobre el tema.. una vez agregado eso lo que hice fue cambiar las etiquetas <tr> de lugar y las puse por encima del <form>...
antes estaban asi:

while($reg=mysqli_fetch_array($registro1)){
echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
echo "
<tr>
<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>
</tr>";
echo "</form>";

ahora:

while($reg=mysqli_fetch_array($registro1)){
echo "<tr>";
echo "<form action='' method='' enctype='multipart/form-data' id='fo3' name='fo3'>";
echo "

<td width='150'><input type='text' id='cantidad' name='cantidad' placeholder='Cantidad' required></td>
<td width='150'><input type='text' id='talle' name='talle' placeholder='Talles'></td>
<td width='150'><input type='submit' name='enviar' id='enviar' class='agregar' value='Agregar a la Lista'><div id='message'></div></td>";
echo "</form>";echo</tr>";

Porque haria eso, porque lo que buscaba es el type=submit despues de la clase .form pero pero el submit que estaba dentro de la etiqueta <td> no es hijo de .form es hijo de <tr> por ende tenia que poner el <td> como hijo de .form...

el Jquery quedaria asi

$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('.form').submit(function(e) {
e.preventDefault();
$this = $(this);
$.ajax({
type: 'POST',
url: 'pedido.php',
data: $(this).serialize(),
success: function(data) {
$('#agregado').show(1000);
setTimeout(function() {
$("#agregado").fadeOut(1500);
},2000);
$this.parent().find('input[class^="agregar"]').hide();
}
})
return false;
});
})

Como dije no soy un especializado en el tema de jquery asique si llegase a estar mal explicado y alguien lo puede explicar mejor estaria bueno que lo explique, este fue mi razonamiento desde mi logica.. jeje
Asi logro ocultar el boton

Muchas gracias por la ayuda y por el tiempo..

Saludos!!