jquery remove() with multiple form

jquery remove() with multiple form

本文关键字：multiple form with remove jquery      更新时间：2023-09-26

我想删除表单中的单个部分。我有多个具有相同部分的表单。当我在 Split3 中的 MyForm1 中并触发删除时，只有 MyForm1 中的 Split3 应该被删除，而不是全部删除。

例如，使用以下方面的任何建议：

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> test</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>  
  <style type='text/css'>
    form {
    font-family: helvetica, arial, sans-serif;
    font-size: 11px;
}
form div{
    margin-bottom:10px;
}
form a {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #444444;
    background: #555555;
    color:#f7f7f7;
    text-decoration:none;
    vertical-align: middle;
}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function () {
    $('form[name="inpForm"]').submit( function () {
        var $form = $(this).closest("form");
        alert($(this).find('input[name="FirstName"]').val());
        alert("name of form: " + $form.attr('name'))
        alert("div index: " + $(this).closest("div").attr('id'));
        return false;
    });
    $('.removeSplit_2_').click(function(){
        var numItems = $('div').length;
        alert("Aantal div secties: "+ numItems);
        $('div').each(function(){
            var indexDiv = $(this).attr('id');
            alert("div index: " + indexDiv); // or simple this.id
            if (numItems == indexDiv) {
                alert('Do your thing and remove the div section');
                //$(this).remove();
            }
        });
    });
    $('.removeSplit_3_').click(function(){
        var MijnID      = this.id;
        alert(MijnID);
        var numItems = $('div').length;
        alert("Aantal div secties: "+ numItems);
        $('div').each(function(){
            var indexDiv = $(this).attr('id');
            alert("div index: " + indexDiv); // or simple this.id
            if (numItems == indexDiv) {
                alert('Do your thing and remove the div section');
                //$(this).remove();
            }
        });
    });
});//]]>  
</script>
</head>
<body>
<form name = "MyForm1">
    <div id="Split1">MyForm1 Split1
        <input name="FirstName" type="text"/>
    </div>
    <div id="Split2">MyForm1 Split2
        <div name="cButton_2_" id="cButton_2_" class="cButton_2_" ><input name="FirstName" type="text"/></div>
        <div name="xButton_2_" id="xButton_2_" class="xButton_2_" ><a href="javascript:void(0);" id="removeSplit_2_" class="removeSplit_2_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>
    <div id="Split3">MyForm1 Split3
        <div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
        <div name="xButton_3_" id="xButton_3_" class="xButton_3_"><a href="javascript:void(0);" id="removeSplit_3_" class="removeSplit_3_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>
</form>
<form name = "MyForm2">
    <div id="Split1">MyForm2 Split1
        <input name="FirstName" type="text"/>
    </div>
    <div id="Split2">MyForm2 Split2
        <div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
        <div name="xButton_2_" id="xButton_2_" class="xButton_2_"><a href="javascript:void(0);" id="removeSplit_2_" class="removeSplit_2_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>
    <div id="Split3">MyForm2 Split3
        <div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
        <div name="xButton_3_" id="xButton_3_" class="xButton_3_"><a href="javascript:void(0);" id="removeSplit_3_" class="removeSplit_3_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>
</form>
<form name = "MyForm3">
    <div id="Split1">MyForm3 Split1
        <input name="FirstName" type="text"/>
    </div>
    <div id="Split2">MyForm3 Split2
        <div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
        <div name="xButton_2_" id="xButton_2_" class="xButton_2_"><a href="javascript:void(0);" id="removeSplit_2_" class="removeSplit_2_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>
    <div id="Split3">MyForm3 Split3
        <div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
        <div name="xButton_3_" id="xButton_3_" class="xButton_3_"><a href="javascript:void(0);" id="removeSplit_3_" class="removeSplit_3_"><IMG SRC="./1x.gif" BORDER="0"></a></div>
    </div>    
</form> 
</body>
</html>

所以你需要做的就是：

$( "#Split3" ).remove();

它将获取名为"Split3"的第一个 id 并将其删除！

我希望这就是你要找的。

JSBin： http://jsbin.com/kibipoxowa

卢卡

根据您的评论，试试这个：

$('.removeSplit_2_').click(function () {
    var mySplit = $(this).closest('.Split_2_');
    mySplit.remove();
});

$(document).on( "click", "a", function() {
   $( this ).remove();
});

测试这个

相关文章：