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，而不是最后一個，因為我正在動態創建div id 。

用於創建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 =要刪除的選定行的對象

希望這可以幫助。

Answer 2

可以辦到。 但是，腳本背后的邏輯是完全錯誤的。

讓我解釋：

• 如果有人嘗試刪除必須克隆的主實例 （ #preacq ），將會發生什么？
• 如果有人想要克隆“克隆”按鈕所在的實例 （否則為什么要在每個實例中放置“克隆”按鈕但復制main ）怎么辦？
• 出於這個目的，處理id是過分的。 主要實例包含具有其自己的id屬性的元素（例如： select id="glListName0" ）。 因此，每次克隆主實例時，具有相同id的元素數量都會增加。 請記住，每個DOM元素的id 必須唯一
• 由於每個實例都有“ clone”和“ remove”按鈕，因此克隆實例應在已克隆的實例 之后立即附加，而不是在列表的末尾（否則-再次-為什么將“ clone”按鈕放在每個實例內實例 ？）。
• 在主實例中單擊“刪除”按鈕，這是在減少cloneCount 而不刪除任何元素，因為它的id屬性沒有附加數字，但具有活動的“刪除”按鈕。

@imsheth提供的答案在某種程度上是正確的。 當涉及到.clone()時，您絕對應該避免處理id並使用可以對類進行操作並使用“父代”樣式選擇器的方案。 否則，您必須關心克隆實例中的每個元素id 。

---

為什么您的腳本沒有刪除所需的實例？

每次按下“克隆”按鈕， cloneCount值都會增加1 ：

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

刪除時，實際上是在檢查cloneCount的最新值（它實際上還代表最新創建的元素）：

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

該如何修復？

由於實際問題是如何基於id刪除特定的DIV，因此我不會在此討論其他問題。 因此，有一個快速修復的示例：

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

但是我會使用@imsheth解決方案。

Answer 3

很難說出您在這里做什么，但是如果動態創建行，則在頁面加載后，它們很可能沒有獲得分配給負圖像的“刪除”功能，而該負圖像將添加到dom中。 如果您通過主體（或父容器）傳遞分配，則即使負號稍后添加到dom中，減號也會起作用。 謹慎使用這種類型的功能分配，我通常只在這種情況下才這樣做。

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