Javascript 具有多个表单的jquery remove（）_Javascript_Jquery

Javascript 具有多个表单的jquery remove（）

javascript jquery

Javascript 具有多个表单的jquery remove（）,javascript,jquery,Javascript,Jquery,我想删除表单中的单个节。我有多个相同部分的表单。当我在Split3中的MyForm1中并触发删除时，只应删除MyForm1中的Split3而不是全部任何建议，例如： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> test</title>

我想删除表单中的单个节。我有多个相同部分的表单。当我在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>


试验
形式{
字体系列：helvetica、arial、无衬线字体；
字体大小：11px；
}
表格组{
边缘底部：10px；
}
表格a{
字体大小：12px；
填充：4px10px；
边框：1px实心#4444；
背景：#555555；
颜色：#f7f7f7；
文字装饰：无；
垂直对齐：中间对齐；
}
//  
MyForm1 Split1
MyForm1拆分2
MyForm1拆分3
MyForm2 Split1
MyForm2 Split2
MyForm2 Split3
MyForm3 Split1
MyForm3 Split2
MyForm3拆分3

因此，您需要做的就是：

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

它将抓取第一个名为“Split3”的id并将其删除

我希望这就是你要找的

JSBin：

卢卡

根据您的评论，尝试以下方法：

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

当我使用时测试这一点：

$（'.removeSplit_2_'）。单击（函数（）{var mySplit=$（'.Split_2_'）；mySplit.remove（）；}）将删除所有slpits2。当我使用时：$（'.removeplit_2_'）。单击（函数（）{var mySplit；var form=$（this.closest（“form”）.attr（'id'）；var formObj=document.getElementByIdform）；//mySplit=$（'.Split_2_'）；不工作mySplit=$（form）。查找（'Split_2_'）；//mySplit.remove（）；也不工作$（'div.remove（mySplit）；}）这将导致不删除任何内容。它将删除所有拆分3，而不是它所处的格式。@Cyrillheltzel否。。。如果您查看JSBin，它证明它只删除了第一个。。。。
$(document).on( "click", "a", function() {
   $( this ).remove();
});