刪除兩個HTML元素之間的空間：文本框和glyphicon
[英]Removing space between two html elements: textbox and glyphicon
問題描述
我想以HTML形式動態添加行。 但是，我有一個小問題：我的表單是：
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
</div>
<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left;'>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</body>
</html>
我的jQuery腳本是
jQuery(document).ready(function() {
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
$('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
e.preventDefault();
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
});
但是，問題在於正glyphicon離文本框較遠，而負glyphicon離文本框較近，這是必需的，如圖中所示。 我還如何從文本框中將加字形圖標移動到與減字形圖標類似的距離。
這應該是非常極端的，但是我是該地區的新手，您能否確定問題並提出解決方案。 謝謝！
5 個解決方案
解決方案1
2 已采納 2016-05-27 09:43:43
演示： https : //jsfiddle.net/gurn5zh9/
首先將您a tag add new field到main div ，以add new field
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" class="col-md-1 col-lg-1 addField" style='padding-left:20px'>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</div>
</div>
然后在腳本中將其從克隆中刪除：
jQuery(document).ready(function() {
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
$ccc = $('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper);
$ccc.find('.addField').remove();
$ccc.find('input').val('').focus();
});
$('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
e.preventDefault();
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
});
解決方案2
1 2016-05-27 09:43:02
您的jQuery代碼沒有任何問題。 但是問題出在您的HTML代碼中。 這里
您沒有正確關閉html標簽
在HTML和js文件中正確使用您的類，在這些文件中您可以動態創建HTML元素，並且如果您想要相同的功能，請對兩者使用相同的CSS樣式。
請勿更改腳本並嘗試此操作
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" style="padding-left:20px;" class="add-field">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</div>
</div>
</body>
</html>
輸出將是
解決方案3
0 2016-05-27 09:24:57
事實是，“ plusicon”的“ a”標記不在div“ multi-fields”范圍內。 創建新行時，請在“多字段” div中附加“ minusicon”。 這就是為什么兩者之間的位置不同。
壞事可以解決：
<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left; margin-left: -88px;'>
我正在尋找一種使用jquery的更好的方法，找到它時進行更新。
更新：
首先，將您的plusicon標簽放入多字段div
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
<a href="#" class="col-md-1 col-lg-1" style='mpadding-left:20px '>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
然后，當您要克隆它時，從克隆中刪除a標簽。
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
var newclone = $('.multi-field:first-child', $wrapper).clone(true);
newclone.find("a").remove();
newclone.append(remove).appendTo($wrapper).find('input').val('').focus();
});
解決方案4
0 2016-05-27 09:29:38
提示：您忘記關閉<div class="multi-fields"> :)
解決方案5
0 2016-05-27 09:31:21
嘗試這個 ：
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-6 col-lg-6 " >
在同一空間中的兩個HTML元素之間切換可見性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.