javascript - 从无效的表单中删除内容

Question

我创建了一个 add_field 函数，
然后遇到了删除选项不起作用的问题。
请修复这些代码。预先感谢您。

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(); 
    });
});
        

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