Котвата изпълнява различна функция, която й е присвоена - jquery

По някаква причина href с класа RemoveSpell, след като щракнете върху изпълнява на a.AddSpell отново. Можете да изпробвате проблема тук http://89.69.172.125/cms2.0/

$(document).ready(function(){
championNumber = 1;
$("a#AddChampion").on("click",function(){

$("div#ChampionInput").append(
"<div class="Champion">
<a href="#" class="Remove">Remove</a>
<br>
<input type="text" class="ChampionInput" name="champion[]" placeholder="Champion "+championNumber+"">
<a href="#" class="AddSpell">Add Spell</a>
<br>
<div>");
championNumber++;
});
$("div#ChampionInput").on("click", "a.Remove",function(){
$(this).parent("div.Champion").remove();

});
$("div#ChampionInput").on("click", "a.AddSpell",function(){
$(this).append(
"<div class="Spell">
<br>
<input type="text">
<a href="#" class="RemoveSpell">Remove Spell</a>
</div>
");
});
$("div#ChampionInput").on("click", "a.RemoveSpell",function(){

});
});

Отговори:

Не трябва да добавяте магията за премахване като дете на addSpell елемент, трябва да го поставите след това

$(document).ready(function() {
championNumber = 1;
$("a#AddChampion").on("click", function() {

$("div#ChampionInput").append(
"<div class="Champion">
<a href="#" class="Remove">Remove</a>
<br>
<input type="text" class="ChampionInput" name="champion[]" placeholder="Champion " + championNumber + "">
<a href="#" class="AddSpell">Add Spell</a>
<br>
<div>");
championNumber++;
});
$("div#ChampionInput").on("click", "a.Remove", function() {
$(this).parent("div.Champion").remove();

});
$("div#ChampionInput").on("click", "a.AddSpell", function() {
$(this).after(
"<div class="Spell">
<br>
<input type="text">
<a href="#" class="RemoveSpell">Remove Spell</a>
</div>
");
});
$("div#ChampionInput").on("click", "a.RemoveSpell", function() {
$(this).closest(".Spell").remove();
});
});

* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
margin: 0 auto;
width: 100%;
max-width: 900px;
}
input {
border: 1px solid #999;
}
.ChampionInput {
margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="AddChampion">Add Champion</a>
<form name="second_form" id="second_form" method="POST">
<div id="ChampionInput">
</div>
<br>
<br>
<input type="submit" name="submit">
</form>

Няколко проблема. Невалидно html вмъкване и не разпознава, че събитията, които се появяват на низходящ елемент, също ще задействат манипулатори на събития на родителя.

Събитията разпространяват дървото на DOM. Така че, когато гнездиш removeSpell вътре addSpell и кликнете removeSpell събитието също ще се задейства addSpell

Всъщност това е начинът, по който делегирате събития on(), Назначавате инструмента за обработка на събития на div#ChampionInput който е до DOM дървото от двата елемента. Тази делегация разчита на разпространението на събитията или "балиране" от целите

Не можете да имате <a> като наследник на <a>.