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用作类。

如果您要删除输入，是否可以不使用.model遍历文档树并移除.closest()父级？

p / s：我无法理解您使用container变量的意图，因为它未在您的脚本中定义，因此您可能想要更新您的具体问题（ 1）限制容器的数量和（2）你想要删除什么 - 父元素，或只是前面的输入元素。

＆＃13;

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

＆＃13;

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

＆＃13;

使用jquery动态删除项目

1 个答案: