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