CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 25

removing the items dynamically using jquery

I am trying to remove the dynamically created elements with jquery, so far i am not successful because every time i click the x button, after 2 or 3 clicks, it removes all elements while i want to delete only the element it is clicked

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

here is my jquery code: 

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

Upvotes: 0

Views: 72

Answers (1)

Terry
Terry

Reputation: 66228

The first major problem with your markup is that you are using the same ID for multiple elements. IDs must be unique in the document and cannot be reused, therefore I suggest you use btRemove as a class instead.

If you want to remove the input, can you simply not traverse up the document tree and remove the .model parent using .closest()?

p/s: I am unable to understand your intention of using the container variable since it is not defined in your script, so you might want to update your question about what exactly you are trying to do by (1) contining the number of containers and (2) what do you want to be removed—the parent element, or just the preceeding input element.

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

Upvotes: 3

Related Questions