Why does Jquery AJAX appends empty table cells on top of cells containing data

Question

So I am using AJAX via jquery to append data to a table after someone clicks on the submit button , IT works , but the thing is that it first appends two horizontal table cells that are empty , then gets followed by the cells containing data and as long as I click on the submit button , those empty cells add up , it looks weird .. is there a way to fix this .. Below is my code .

$(document).ready(function() {

$( document ).on( 'click', '#submit_button', function () {
  event.preventDefault();

  var sku = $("#sku").val(); 
  var dec = $("#dec").val(); 


     $.ajax({
        url:"check_sku.php", 
         data:{sku: sku, dec:dec}, 
         type:"POST", 
        success:function(result){

            if(result !="MEID / DEC / SIM needed"){   
              $(".rows").remove();
              $("#submit_button").remove();
              $("#cancel").remove();
              $("#enter_product_sku").remove();
              $("#table_1").append(result);
            }
              if(result =="MEID / DEC / SIM needed"){          

                  $("#meid").show();

              }               
        }

      });


    });

});

The data that gets appended , contained in the result variable is this ... any reason why it adds a row of two empty table cells first ?

<tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>$title</td><td style='font-weight:bold;'>$count</td></tr>
    <tr id ="enter_product_sku"><td> Enter the product SKU </td><td><input id ="sku" type="text" name ="sku[]" size="20" value ="" /> </td></tr>
        <tr>
        <td>
        <input id ="submit_button"  class ="career_activation" style ="background:#33CC66; width:70px;  height: 50px; color:white; font-weight:bold;padding:10px;" type ="submit" name="submit" value ="ADD" /></td>
        <td>
        <input id ="cancel"  class ="career_activation" style ="background:#CC0000; width:70px; height: 50px; color:white; font-weight:bold; padding:10px;"type ="reset" name="cancal" value ="CANCEL" /></td>
        </tr>

console log string

 <tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Charger2</td><td style='font-weight:bold;'>18</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Charger</td><td style='font-weight:bold;'>4</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Iphone 6</td><td style='font-weight:bold;'>3</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Previal</td><td style='font-weight:bold;'>4</td></tr><tr id ="enter_product_sku"><td> Enter the product SKU </td><td><input id ="sku" type="text" name ="sku[]" size="20" value ="" /> </td></tr><tr>
<td>
<input id ="submit_button"  class ="career_activation" style ="background:#33CC66; width:70px;  height: 50px; color:white; font-weight:bold;padding:10px;" type ="submit" name="submit" value ="ADD" /></td>
<td>
<input id ="cancel"  class ="career_activation" style ="background:#CC0000; width:70px; height: 50px; color:white; font-weight:bold; padding:10px;"type ="reset" name="cancal" value ="CANCEL" /></td>
</tr> 

Answer 1

$.ajax(
{
    url:"check_sku.php", 
    data:{sku: sku, dec:dec}, 
    type:"POST", 
    success:
        function(result)
        {
            if(result !="MEID / DEC / SIM needed")
            {   
                $(".rows").remove();
                $("#submit_button").remove();//does not remove the tr and td tags only the input thus the remaining empty tds and trs
                $("#cancel").remove();//Same here
                $("#enter_product_sku").remove();//and here
                $("#table_1").append(result);
            }
            else if(result =="MEID / DEC / SIM needed")//I also added @Bill'o comments
            {
                $("#meid").show();
            }               
        }

    }
);

See explainations in code

Consider this maybe:

$.ajax(
{
    url:"check_sku.php", 
    data:{sku: sku, dec:dec}, 
    type:"POST", 
    success:
        function(result)
        {
            if(result !="MEID / DEC / SIM needed")
            {   
                $(".rows").remove();
                $("#submit_button").parent().parent().remove();
                $("#enter_product_sku").remove();
                $("#table_1").append(result);
            }
            else if(result =="MEID / DEC / SIM needed")//I also added @Bill'o comments
            {
                $("#meid").show();
            }               
        }

    }
);

You could also remove every tr before inserting the results.