【发布时间】：2018-10-02 06:44:42
【问题描述】：
当您在文本框中键入时，我有此代码可以自动填写下面的短语。
如果您单击“添加人员”，它将为新人员附加文本框和短语。您可以输入他们的信息，它仍会自动填充新词组。
我还为每个新添加的人添加了一个删除按钮。它会删除相应人员的文本框和下面的短语。
如您所见，有一个问题：当您点击“删除”时，它不会删除“再见，{name}”
我已经评论了我的代码，以便您可以帮助我。如何选择“第三个附加元素”（“再见，{name}”）也将其删除？
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('span.one');
result.innerHTML = this.value;
});
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('span.four');
result.innerHTML = this.value;
});
var name1 = document.getElementById('city');
name1.addEventListener('input', function() {
var result = document.querySelector('span.two');
result.innerHTML = this.value;
});
var name1 = document.getElementById('age');
name1.addEventListener('input', function() {
var result = document.querySelector('span.three');
result.innerHTML = this.value;
});
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var input_container = $(".container"); // holds all input containers
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
/* FIRST APPENDED ELEMENT */
$(wrapper).append("<div class='container" + x + "' ><label>Name</label><input type='text' class= 'name' name='mytext[]'><a href='#' class='remove_field'>Remove</a><br><label>City</label><input type='text' class= 'city' name='mytext[]'><br><label>Age</label><input type='text' class= 'age' name='mytext[]'></div>");
/* SECOND APPENDED ELEMENT */
$('div.hello').append('<div id="container' + x + '" id = "' + x + '" >Hello, <span class="name"></span> <span> ,from</span> <span class="city"></span> <span> Your age is:</span><span class="age"> </span><br><br></div>');
/* THIRD APPENDED ELEMENT */
$('div.hello').append('<div id="container' + x + '" id = "' + x + '" >Bye, <span class="name"></span><br><br></div>');
$('input').on('input', function(e) {
var parcontainer = $(this).parents('div').attr('class');
spantoappend = $(this).attr('class');
var val = $(this).val();
var sel = "#" + parcontainer + ' .' + spantoappend;
// var sel = "#" + divtoappend + " span";
$(sel).text('');
$(sel).append(val);
});
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
/* THIS REMOVES SECOND APPENDED ELEMENT */ /* HOW DO I MAKE THIS REMOVE THIRD APPENDED ELEMENT TOO? */
var rem = $(this).parents('div').attr('class');
$('#' + rem).remove();
/* THIS REMOVES FIRST APPENDED ELEMENT */
$(this).parent('div').remove();
x--;
});
});.block {
display: block;
}
input {
width: 50%;
display: inline-block;
margin: 4px;
margin-left: 10px;
}
span.add,
span.remove {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}
label {
display: inline-block;
width: 40px;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add person</button>
<br><br>
<div class="container">
<label>Name</label><input type="text" id="name" name="mytext[]"> <br>
<label>City</label><input type="text" id="city" name="mytext[]"> <br>
<label>Age</label><input type="text" id="age" name="mytext[]">
</div>
</div>
<br>
<div class="hello">
Hello, <span class="one"></span>, from <span class="two"></span>. Your age is: <span class="three"></span><br><br>
Bye, <span class="four"></span><br><br>
</div>
<div class="bye">
</div>【问题讨论】：
-
您对多个 DIV 使用相同的
id='container"+x。 ID 必须是唯一的。改用一个类。 -
@Rohalt 检查this 回答
-
@Barmar 我尝试在第二个和第三个附加元素上将
<div id='container" + x + "' >更改为<div class='container" + x + "' >。效果很好。 只有一个问题：当您在新文本框中输入时，它不会让您输入超过 1 或 2 个字符（请参阅：jsfiddle.net/dyLoxddx/2）。您必须再次单击输入以输入 1 或 2 个字符，然后问题再次发生 -
在你的小提琴中，
sel类似于.container2 .name。这与您正在输入的输入字段和您要将输入复制到的范围相匹配。执行$(sel).text(''); $(sel).append(val);似乎会从输入字段中移除焦点。你应该把它设为.container2 span.name2。 -
另外，每次添加一组新字段时，您都在执行
$('input').on('input', ...)。这会将处理程序添加到 所有 输入，而不仅仅是您刚刚添加的输入。请参阅Event binding on dynamically-created elements 了解正确的方法。
标签： javascript jquery html append