Question

enter image description here

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），会发生什么？
如果有人想要克隆实例，那么＆＃34;克隆＆＃34;按钮被附加到（否则为什么要在每个实例中放置＆＃34;克隆＆＃34;按钮但是复制 main ）？
为了这个目的而处理id＆＃39}是过度的。 主要实例包含具有自己的id属性的元素（例如：select id="glListName0"）。因此，每次克隆主实例时，具有相同id的元素数量都会增加。请注意，每个DOM元素的id必须是唯一的
由于每个实例都有＆＃34;克隆＆＃34;并且＆＃34;删除＆＃34;按钮，克隆实例应该在之后附加到已克隆的实例，而不是在列表的末尾（否则 - 再次） - 为什么要在每个实例中放置＆＃34;克隆＆＃34;按钮？）。
点击＆＃34;删除＆＃34; 主要实例中的按钮，您正在减少cloneCount但不删除任何元素，因为它的id属性没有附加数字但有活跃＆＃34;删除＆＃34;按钮。

@imsheth 提供的answer在某种程度上是正确的。在id时，你绝对应该避免与.clone()交易，并使用你可以操作类并使用＆＃34; parental＆＃34;风格选择器。否则，您必须关心克隆实例中的每个元素id。

为什么您的脚本不会删除您想要的实例？

每次按＆＃34;克隆＆＃34;按钮，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的最新值（实际上也代表最新创建的元素）：< / p>

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

很难说出你在这里做了什么，但如果你动态创建行，那么他们很可能没有得到＆＃34;删除＆＃34;分配给在页面加载后添加到dom的负图像的功能。如果您通过正文（或父容器）传递分配，那么即使将减号添加到dom中，减号也会起作用。谨慎使用这种类型的函数赋值，我通常只在这些类型的情况下这样做。

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

onClick完全删除特定的DIV

3 个答案:

为什么您的脚本不会删除您想要的实例？