Question

我创建了一个add_field函数，然后麻烦删除选项不起作用。
请修复这些代码。提前谢谢你。

＆＃13;

var room = 0;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div id="remove"><div class="deleteMe">X</div><div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';
    
    objTo.appendChild(divtest)
}
$(document).ready(function(){
    $(".deleteMe").on("click", function(){
       $(this).closest("#remove").remove(); 
    });
});

＆＃13;

.deleteMe{
    float: right;
    background: yellow;
    cursor:pointer
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
</div>

＆＃13;

Answer 1

Id首先应该是唯一的，因此请将id更改为class，然后使用以下内容更改删除代码： -

 $(document).on("click",".deleteMe", function(){
       $(this).closest(".remove").remove(); 
  });

检查Here如何使用on

var room = 0;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="remove"><div class="deleteMe">X</div><div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';
    
    objTo.appendChild(divtest)
}
   
    $(document).on("click",".deleteMe", function(){
       $(this).closest(".remove").remove(); 
    });

.deleteMe{
    float: right;
    background: yellow;
    cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
</div>

Answer 2

  <script>   
   var room = 0;
   function add_fields() {
       room++;
       var objTo = document.getElementById('room_fileds')
       var divtest = document.createElement("div");
       divtest.innerHTML = '<div class="remove"><div class="deleteMe">X</div><div class="label">Room ' + room + ':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div></div>';

       objTo.appendChild(divtest)
   }
   $(document).ready(function () {


       $(document).on("click", ".deleteMe", function () {
           $(this).closest("div.remove").remove();
       });

   });

删除表单中的内容不起作用

2 个答案: