Removendo elementos de página criados dinamicamente - javascript, jquery

Verifique o comportamento no violino Aqui.

$(document).ready(function () {
$(".tile").draggable();
$(".tile").on("dragstart", function () {
var numClones = $(".tile").length - 1
if (numClones > 0) {
//why can"t I use fadeOut or empty here?
//make sure we don"t remove the clone before it"s made
$(".tile")[numClones].remove();
}
console.log(numClones);
var clone = $(this).clone();
clone.appendTo("body");
});
});

Isso permite que um usuário crie um clone de um elemento de página no evento de arrastar. Ele também remove o clone anterior. Na linha comentada acima, por que recebo um erro quando tento usar fadeOut remover o div da página? É um objeto jQuery, certo? Recebo o erro Object #<HTMLDivElement has no method fadeOut

Respostas:

O acessador de índice de um elemento jQuery (que é uma abreviação de get(index)) retorna o elemento DOM. Você está procurando o elemento jQuery, caso em que deve usar .eq(index) (não há uma abreviatura para este).

A única razão remove() funciona é porque também é um método de elemento DOM.

$(".tile").eq(numClones).fadeOut(function () {
// make sure the old clones get deleted, not just hidden
$(this).remove();
});

http://jsfiddle.net/2rnSk/1/

Tente isto:

$($(".tile")[numClones]).fadeOut();

Um objeto jQuery se mascara como uma matriz de elementos que seu seletor corresponde. Ao aplicar o índice, você está retornando, no seu caso, um HTMLDivElement. Mas se você embrulhar isso em um objeto jQuery, você deve ser capaz de aplicar fadeOut sem problema.