如何删除动态ID为

Question

我有这个代码，当你在文本框内输入时自动填写下面的短语。

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

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

正如您所见，存在问题：当您点击“删除”时，它不会删除“再见，{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>

Answer 1

嗯，这就是我将要做到的。

为包含＆＃34; Bye＆＃34;的div分配ID。然后在点击Remove链接时获取相关的ID并删除＆＃34; Bye＆＃34; div也是。

＆＃13;

＆＃13;

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--;

   });


 });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;