Почему не работает after() & remove()?

Question

[GaserV]

Есть HTML:

<div class="label">Примеры работ: <span class="add-button" onclick="createFIeld()">+</span></div><br>
			<div class="form-row">
				<label for="file1" class="label-file-selected">file1</label><input id="file1" class="hidden" type="file"><span class="delete-icon" onclick="removeFileInput()"></span>
			</div>

Есть JS:

function createFIeld() {
	$('<div class="form-row"><label for="file3" class="label-file-selected">file1</label><input id="file3" class="hidden" type="file"><span class="delete-icon" onclick="removeFileInput()"></span></div>').after('.form-row').last();
};

function removeFileInput() {
	$('.delete-icon', this).parent('.form-row').remove();
}

Почему ничего не добавляется и не удаляется из DOM?

Answer 1

[TheBububo]

https://jsfiddle.net/umab6fvr/

Comments

[GaserV]

Спасибо! То, что нужно. А еще такой вопрос. У label и input есть id + name. Нужно как-то брать значение последних, например будет file3, и при добавлении следующего поля оно уже будет file4 и т.д. А при удалении например file2 все последние уменьшались на 1? Можно такое реализовать? Или быть может другой путь есть?

[TheBububo]

GaserV: можно по-разному делать, например как-нибудь вроде этого https://jsfiddle.net/hvoq74uj/

[GaserV]

TheBububo: Все отлично, но не до конца. Например я добавил 5 полей. Удалил 5-й. Нажимаю добавить и добавляется уже 6-й а не 5-й. Также, если удаляю 3-й из 5-ти, то получается что-то вроде file 1-2-4-5, а должно быть file 1-2-3-4. И при добавлении уже следующего поля он будет file5

[TheBububo]

Да так и есть, смотрите логику. Скрипт не переименовывает ничего после удаления