onClick完全删除特定的DIV

Question

HTML page .....................................................................

   <form:form method="post" action="saveMiData.action" id="minorityForm"
                commandName="MinInterestModel">
                <div id="addMoreDiv">
                <label id="validNumber" style="display: none; color: #b94a48;"><spring:message
                                    code="Minority.validNumber" /><font color="#b94a48">*</font></label>
                    <div id="preacq" class="MICss">
                        <div id="linkopen">
                            <div class="span5">
                                <label class="abc" style="margin-bottom: 1px;"> <spring:message
                                        code="MinorityInterest.elementName" /></label>
                                <form:select id="glListName0" path="glElementId"
                                    name="glListName" class="input-block-level" size="1" multiple="bbn">
                                </form:select>
                            </div>

                            <div class="span5">
                                <label class="abc" style="margin-bottom: 1px;"> <spring:message
                                        code="MinorityInterest.AccountType" /></label>
                                <form:select path="accountType" id="accountName0"
                                    name="accountName" class="input-block-level" multiple="bbn">
                                    <option value="0">select</option>
                                    <option value="1">Debit</option>
                                    <option value="2">Credit</option>
                                </form:select>
                            </div>

                            <div class="span5">

                                <label class="abc" style="margin-bottom: 1px;"><spring:message
                                        code="MinorityInterest.preAcq" /></label> <input type="text"
                                    name="preAcqSurPlus" id="preacqas0" class="input-block-level abc"
                                    path="preAcqSurPlus"></input>
                            </div>

                            <div class="span5">
                                <label class="abc" style="margin-bottom: 1px;"> <spring:message
                                        code="MinorityInterest.Share" /></label> <input type="text"
                                    name="Shares" id="share0" path="Shares" class="input-block-level abc"></input>
                            </div>

                            <div class="span2" style="margin-top: 15px;">
                                            <div class="add_remove">
                                                <a><img onclick="addMore()"
                                                    src="<%=Config.getStaticURL()%>resources/img/Add-field.png" /></a>
                                            </div>
                                            <div class="add_remove">
                                                <a><img onclick="removeMI(this)" src= "<%=Config.getStaticURL()%>resources/img/remove-field.png" /></a>
                                            </div>
                                        </div>
                        </div>
                        <script type="text/javascript">
                            function addMore() {
                            //  alert("adddiv");
                                $("#preacq").clone().attr('id', 'preacq'+ cloneCount++).appendTo("#addMoreDiv");
                            }

                        </script>
    <script>

function removeMI(an){
//  alert($(this).attr('id'));
$(this).remove();
            alert("vaibhavremove"+an);

             //  alert($('#preacq0').attr('id','preacq0'+ cloneCount--).remove());

            if(cloneCount==1){
                  alert("No more textbox to remove");
                  return false;
               }   

        //  cloneCount--;
               $("#preacq" + cloneCount).remove();
}
</script>
                    </div>
                </div>
                <div class="span5" style="float: left;width:38%">
            <label class="abc" style="margin-bottom: 1px; margin-top:67px;  font-size: 17px; margin-left: 347px;"> <spring:message
                                        code="MinorityInterest.TotalAmount" /></label>
                </div>

                <div class="span5" style="float: right;">
                    <input type="text" style="margin-top: 67px;margin-left: -135px;width: 211px;">
                </div>
                <div class="span5" style="float: right;">
                    <input type="text" style="margin-top:67px;margin-left: -158px;width: 211px;">
                </div>
                <form:hidden path="parenCompanyId" id="PcId"/>
                <form:hidden path="childCompanyId" id="CcId"/>
                <form:hidden path="financialYearId" id="FyId"/>
                <form:hidden path="reportingPeriodId" id="rPId"/> 
                <div class="span6" style="float: right; margin-right: 0%">
                    <!-- <input id="saveMI" class="" type="button" value="Save" onclick="saveMI();"> -->
                    <button id="saveButtonId" name="save" value="save" onclick="saveMI();"
                        style="height: 30px; width: 50px;position: fixed; top: 627px;">save</button>
                </div>

            </form:form>
        </div>
My approach on removal function:

    function removeMI(){
        alert("vaibhavremove");
        //  alert($('#preacq0').attr('id','preacq0'+ cloneCount--).remove());
        if(cloneCount==1){
            alert("No more textbox to remove");
            return false;
        }   
        cloneCount--;
        $("#preacq0" + cloneCount).remove();
    }

It works fine but my requirement is when click on minus button, the selected div will be removed, not the last one, as I'm creating the div id dynamically.

Code for creating div id :

<script type="text/javascript">
    function addMore() {
        //  alert("adddiv");
        $("#preacq0").clone().attr('id', 'preacq0'+ cloneCount++).appendTo("#addMoreDiv");                          
    }
</script>

Remove button markup:

    <div class="add_remove"> 
        <a>
            <img onclick="removeMI()" src= "<%=Config.getStaticURL()%>resources/img/remove-field.png" />
        </a>
    </div>
</div>

Thanks in advance.

Answer 1

// For deleting article row
$(document).on('click','.delete-article',function() {
    var selectedRowForDeletion = $(this).closest(".dynamic-new-row");
    selectedRowForDeletion.remove();
});

Where:

.delete-article = class of the remove button/image

.dynamic-new-row = class of every row in div/tr to be removed

selectedRowForDeletion = object of the selected row to be removed

Hope this helps.

Answer 2

It can be done. The logic behind your script however is totally wrong.

Let me explain:

• What gonna happen if someone attempt to remove the main instance ( #preacq ) that has to be cloned?
• What if someone want o clone the instance where the "clone" button is attached to (otherwise why to place "clone" button inside each instance but copy the main )?
• Dealing with id 's is overkill for that purposes. The main instance include elements with their own id attributes (like: select id="glListName0" ). Therefore number of elements with the same id is increased each time you clone the main instance . Keep in mind that the id of each DOM element must be unique
• Since each instance has "clone" and "remove" buttons, the clone instance should be attached right after the instance that has been cloned, not at the end of the list (otherwise - once again - why to place "clone" button inside each instance ?).
• Clicking "delete" button in main instance , you're reducing cloneCount but not deleting any elements, since it has no number attached to its id attribute but has active "delete" button.

The answer provided by @imsheth is somehow correct. You should definitely avoid dealing with id 's when comes to .clone() and use scenario where you could operate on classes and use "parental" style selectors. Otherwise, you have to care about each element id inside cloned instance.

---

Why your script does not remove the instance you want?

Each time you press "clone" button, the cloneCount value gets increased by 1 .:

function addMore() {
    $("#preacq").clone().attr('id', 'preacq'+ cloneCount++).appendTo("#addMoreDiv");
    // say, you cloned instance 5 times, so the "cloneCount" value is now 5
}

When comes to delete, you're actually checking the latest value of cloneCount (which actually represents also the latest created element):

function removeMI(){
    // because you've created 5 elements, the current "cloneCount" value is 5:
    $("#preacq" + cloneCount).remove();
    // the above will delete "#preacq5" element, which is the latest created.
}

How to repair this?

I won't focus on another issues there, since the actual question is how to remove a specific DIV based on id . So there's an example of a quick fix:

function addMore(){
    var cloned = $("#preacq").clone().attr('id', 'preacq'+ cloneCount++);
    // add "data-parent-id" attribute to the "remove" button (to indicate which div should be deleted when this button is clicked):
    cloned.find('.add_remove a img').attr('data-parent-id', '#preacq'+ (cloneCount-1));
    cloned.appendTo("#addMoreDiv");
}

// pass the clicked button (btn) to the function:
function removeMI(btn){
    // get the element id from data attribute of the button:
    $($(btn).data('parent-id')).remove();
}

I'd however use @imsheth solution.

Answer 3

It is hard to tell what you are doing here, but if you are dynamically creating the rows, than they are likely not getting the "delete" function assigned to the minus image you are adding to the dom after the page has loaded. If you pass the assignment through the body (or a parent container) than they will the minus sign will work even if it is added to the dom later. Use this type of function assignment sparingly, I generally only do it this way in these types of situations.

$('#minorityForm').on('click', '.myMinusDiv', function(){ alert("minus was clicked") });