如何删除具有动态ID的附加元素

Question

当您在文本框中输入内容时，我有这段代码可以自动填充以下短语。

如果单击“添加人员”，它将为新人员附加文本框和短语。 您可以输入他们的信息，它仍然会自动填充新短语。

我还为每个新添加的人添加了一个删除按钮。 它将删除相应人员的文本框和下面的短语。

如您所见， 这是一个问题 ：单击“删除”时，它不会删除“ 再见，{名称} ”

我已经注释了我的代码，以便您可以提供帮助。 如何选择“第三个附加元素”（“ Bye，{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> 

Answer 1

好吧，这就是我要做的。

为包含“再见”的div分配一个ID，然后在单击“ Remove链接并删除“再见”的div时获取相关的ID。

 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_bye' + 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(); $('#container_bye'+x).remove() /* THIS REMOVES FIRST APPENDED ELEMENT */ var byElId = $(this).parents('div').attr('class').replace('container','') $(this).parent('div').remove(); $("#container_bye"+byElId).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>