onClick完全删除特定的DIV

Question

HTML页面................................................ .....................

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

它工作正常,但我的要求是当点击减号按钮时,所选的div将被删除,而不是最后一个,因为我正在id动态创建div .

创建div的代码id:

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

删除按钮标记:

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

提前致谢.

Answer 1

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

哪里:

.delete-article =删除按钮/图像的类

.dynamic-new-row =要删除的div/tr中每一行的类

selectedRowForDeletion =要删除的所选行的对象

希望这可以帮助.