javascript - 使用 jquery 动态删除项目

Question

我正在尝试使用 jquery 删除动态创建的元素，到目前为止我还没有成功，因为每次我单击 x 按钮时，单击 2 或 3 次后，它会删除所有元素，而我只想删除它所在的元素点击

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_1" id="client_status_1"><input type="button" id="btRemove" rel="client_status_1" value="X" class="sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_2" id="client_status_2"><input type="button" id="btRemove" rel="client_status_2" value="X" class="sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_3" id="client_status_3"><input type="button" id="btRemove" rel="client_status_3" value="X" class="sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_4" id="client_status_4"><input type="button" id="btRemove" rel="client_status_4" value="X" class="sectionBtn bt"></div>

这是我的 jquery 代码:

$(document).on('click','#btRemove', function() {
    var btnRemovalItem = $(this).attr('rel').split('_')[2];  
    iCnt = btnRemovalItem;
    if (iCnt != 0) { 
        $('#bt' + iCnt).remove(); 
        iCnt = iCnt - 1; 
    }
    if (iCnt == 0) { 
        $(container).empty(); 
        $(container).remove(); 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt')
    }
});

Answer 1

标记的第一个主要问题是您对多个元素使用相同的 ID。 ID 在文档中必须是唯一的并且不能重复使用，因此我建议您使用 btRemove 作为类。

如果你想删除输入，你可以不遍历文档树并使用.closest()删除.model父级吗？

p/s:我无法理解您使用 container 变量的意图，因为它没有在您的脚本中定义，因此您可能需要更新您的问题，了解您到底想要做什么通过 (1) 限制容器的数量以及 (2) 您想要删除什么——父元素，或者只是前面的输入元素。

$(document).on('click','.btRemove', function() {
    $(this).closest('.modal').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_1" id="client_status_1"><input type="button" rel="client_status_1" value="X" class="btRemove sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_2" id="client_status_2"><input type="button" rel="client_status_2" value="X" class="btRemove sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_3" id="client_status_3"><input type="button" rel="client_status_3" value="X" class="btRemove sectionBtn bt"></div>

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_4" id="client_status_4"><input type="button" rel="client_status_4" value="X" class="btRemove sectionBtn bt"></div>