Borrar inputs y actualizar total

Al apretar la X, no ajusta.

HTML

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="contenedor">
  <div class="elemento">
    <span class="borrar">x</span>
    <input class="cantidad" type="number" value="3" min="1" max="9999">
  </div>
  
  <div class="elemento">
    <span class="borrar">x</span>
    <input class="cantidad" type="number" value="6" min="1" max="9999">
  </div>
  
  <div class="elemento">
    <span class="borrar">x</span>
    <input class="cantidad" type="number" value="9" min="1" max="9999">
  </div>
</div>

<hr>

<div>
  <p>Total: <span id="total"></span></p>
</div>

CSS

body {
  font-family: sans-serif;
}

div.elemento {
  margin:10px 0px;
  background:#ccc;
}

span.borrar {
  padding:0px 10px;
  cursor:pointer;
}

JavaScript

function obtenerTotal() {
    var sum = 0;
    $("input.cantidad").each(function () {
        if(!isNaN(this.value) && this.value.length!==0) {
            sum += parseFloat(this.value);
        }
    });
    $("#total").text(sum);
}

obtenerTotal();

$(".elemento .borrar").click(function() {
		var esto = $(this);
		esto.parent().css("opacity", "0.3").stop().slideUp(300, function() {
			esto.remove();
		});
    obtenerTotal();
});

$("input.cantidad").on("change keyup", function () {
	obtenerTotal();
});