• HTML
• CSS
• JS

HTML

<form>
    <b>Texto:</b>
    <input type="text" style="width:140px;" id="texto" value="frelements.com" placeholder="..."/>
    <input type="button" value="+" class="boton agregar" id="agregar">
</form>
<br>
<table class="tabla-compras" id="tablaCompras">
<thead>
    <tr>
        <td>No</td>
        <td width="150px">Texto</td>
        <td>Quitar</td>
    </tr>
</thead>
<tbody>
    <tr><td>1</td><td>frelements.com</td><td align="center"><input type="button" value="x" class="boton quitar" id="quitar"></td></tr>
    <tr><td>2</td><td>frelements.com</td><td align="center"><input type="button" value="x" class="boton quitar" id="quitar"></td></tr>
    <tr><td>3</td><td>frelements.com</td><td align="center"><input type="button" value="x" class="boton quitar" id="quitar"></td></tr>
</tbody>
<tfoot>
    <tr colspan="3">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tfoot>
</table>

CSS

body{
	font-family:sans-serif;
	font-size:10pt;	
}
/**/
form input{
	margin:4px;
	padding:7px;
}
.boton{
	background-color:#dedede;
	color:#fff;
	border:none;
	border-radius:2px;
	margin:4px 4px 4px 0px;
	padding:4px;
	font-weight:bold;
}
.boton.agregar{
	background-color:#059af8;
	color:#fff;
	margin:0px;
	padding:2px 4px 2px 4px;
}
.boton.agregar:hover{
	background-color:#fff;
	border:1px solid #059af8;
	color:#009999;
}
.boton.quitar{
	background-color:#ff0033;
	border:1px solid #ff0033;
	margin:0px;
	padding:2px 4px 2px 4px;
}
.boton.quitar:hover{
	background-color:#fff;
	border:1px solid #ff0033;
	color:#ff0033;
}
/**/
table.tabla-compras{
	font-size:10pt;
	border-collapse:collapse;
}
table.tabla-compras tr td{
	margin:10px;
	padding:10px;
}
table.tabla-compras>tbody tr td{
	border:1px solid #059af8;
}
table.tabla-compras>thead{
	border:1px solid #059af8;
	background-color:#059af8;
	font-size:11px;
	font-weight:bold;
	color:#fff;
}
table.tabla-compras>tfoot{
	border:1px solid #333;
	background-color:#333;
	font-size:11px;
	font-weight:bold;
	color:#fff;
}
table.tabla-compras>tbody tr:hover{
	background-color:#f7f7f7;
}

JS

function agregarFila(texto){
    var	fila="<tr>"+
                "<td></td>"+
                "<td>"+texto+"</td>"+
                "<td align='center'><input type='button' value='x' class='boton quitar' id='quitar'></td></td>"+
            "</tr>";
    return fila;
}

function actualizarNum(){
    var num=$('#tablaCompras tbody tr td:nth-child(1)');
    for(var i=0;i<num.length;i++){
        $(num[i]).html(parseInt(i+1));
    }
}

$(document).ready(function(){

    $("#agregar").on("click",function(){
    
        var fila=agregarFila($("#texto").val());
        $("#tablaCompras tbody").append(fila);
        actualizarNum();
    });

    $("#tablaCompras").delegate("#quitar","click",function(){
    
        var subTotal=$(this).parents("tr").find("td").eq(4).html();		
    
        $(this).parents("tr").fadeOut("normal", function(){
            $(this).remove();
            actualizarNum();
        });
    
    });

});