如何使用jquery刪除字段？

我想通過點擊添加更多按鈕來增加字段的數量，並且我很成功地做到這一點。但是，我不明白我出錯的地方。它顯示了警報，但不會刪除該字段任何幫助表示讚賞。如何使用jquery刪除字段？

的Jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    var x=0; 
    $('#addmore').click(function(e){ 
     e.preventDefault(); 

     $("#Files").append("<input name='file' id='file"+x+"' type='file'/><br>"); 
     $("#rem").append("<input value='remove' id='but"+x+"' type='button'/><br>"); 
     $("#but"+x).click(function(){ 
       alert("#but"+x); 
       $("#but"+x,"#file"+x).remove(); 
     }); 

     x++; 
    }); 

}); 
</script>

HTML：

<body> 
<div> 
<form name="imageForm" id="imageForm" method="post" enctype="multipart/form-data" action="imageuploadlogic.jsp"> 
<input type="file" name="file0" id="imagefile" class=""/><br> 
<div id="Files" style="float: left;"></div> 
<div id="rem" style="float: left;"></div><br> 
<input type="button" id="addmore" value="addmore"/> 
<input type="submit" id="submitimage" /> 
</form> 
</div> 
</body>

來源

2014-02-08 3bu1

由於您使用的共享變量x，去除邏輯不會是適當的嘗試

$(document).ready(function() { 
    var x = 0; 
    $('#addmore').click(function (e) { 
     var id = x; 
     e.preventDefault(); 

     $("#Files").append("<input name='file' id='file" + id + "' type='file'/><br>"); 
     $("#rem").append("<input value='remove' id='but" + id + "' type='button'/><br>"); 
     $("#but" + x).click(function() { 
      $("#file" + id).add(this).remove(); 
     }); 

     x++; 
    }); 

});

演示：Fiddle

但我會建議一個基於事件的委託解決像

$(document).ready(function() { 
    var x = 0; 
    $('#addmore').click(function (e) { 
     e.preventDefault(); 

     $("#Files").append("<input name='file' id='file" + x + "' type='file'/><br>"); 
     $("#rem").append("<input value='remove' id='but" + x + "' data-id='" + x + "' type='button'/><br>"); 

     x++; 
    }); 
    $("#rem").on('click', 'input[value="remove"]', function() { 
     var id = $(this).data('id'); 
     $("#file" + id).add(this).remove(); 
    }); 

});

演示：Fiddle

來源

2014-02-08 06:22:43

可以請你提的第二個解決方案的優勢。 – 3bu1

Arun不要忘記在刪除元素和輸入名稱都相同之後留下的額外'
'（可能會生成數組'name ='file []''） – Deryck

如何使用jquery刪除字段？

回答

相關問題