我有这个脚本来附加一组输入字段，它工作正常，除了我需要有一个选项来删除/取消附加而不影响其他附加字段。所以例如，我单击我的追加按钮5次，它给了我5组输入字段，但我决定删除第4组。我该如何解决这个问题？我的表单数据正被提交给mysql数据库。
这是我的追加代码：
<script type="text/javascript">
var oncount = 0;
$(function(){
$('a#add_field_online').click(function(e){
e.preventDefault();
oncount += 1;
$('#activation').append(
'<div class="row-fluid">'
+'<div class="span12" style="border-bottom:1px #dddddd; background-color:#cac6c6; ">'
+'<div style="float:left; width:5%;">'
+'<label> </label>'
+'<input type="radio" id="oprocess_where' + oncount + '" name="oprocess_where' + oncount + '" value="Online" checked >Online'
+'</div>'
+'<div style="float:left; width:7%">'
+'<label> </label>'
+'<select name="ostatus' + oncount + '" id="ostatus' + oncount + '" class="input-small">'
+'<option value="Ghost">Ghost</option>'
+'<option value="Actual">Actual</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 7%">'
+'<label>Type</label>'
+'<select id="oupg' + oncount + '" name="oupg' + oncount + '" class="input-small" >'
+'<option value="" selected=" " > </option>'
+'<option value="Exp" >Exp</option>'
+'<option value="Post" >Post</option>'
+'<option value="Upgrade" >Upg</option>'
+'<option value="Retail" >Retail</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>F.U.D</label>'
+'<input id="oupg_date' + oncount + '" name="oupg_date' + oncount + '" type="text" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 11%">'
+'<label>Phone Used</label>'
+'<select id="ophone_used' + oncount + '" name="ophone_used' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="Basic" >Basic</option>'
+'<option value="LTE" >LTE</option>'
+'<option value="iPhone 4/4S" >iPhone 4/4S</option>'
+'<option value="iPhone LTE" >iPhone LTE</option>'
+'<option value="BlackBerry" >BlackBerry</option>'
+'<option value="3G/4G" >3G/4G</option>'
+'<option value="Data Block / Smartphone" >Data Block / Smartphone</option>'
+'</select>'
+'</div>'
+'<div id="odataBasic' + oncount + '" style="float:left; width: 12%;">'
+'<label>Data Plan</label>'
+'<select id="odata' + oncount + '" name="odata' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="DDL" >DDL</option>'
+'<option value="DPPU" >DPPU</option>'
+'<option value="Data Block" >Data Block</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'</select>'
+'</div>'
+'<div id="odataSmart' + oncount + '" style="float:left; width: 12%; display: none;">'
+'<label>Data Plan</label>'
+'<select id="odatasmart' + oncount + '" name="odatasmart' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$25" >$25</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div id="odivmessaging' + count + '" style="float:left; width: 11%">'
+'<label>Messaging</label>'
+'<select id="omessaging' + oncount + '" name="omessaging' + oncount + '" class="input-medium" >'
+'<option value="" selected=" " > </option>'
+'<option value="$5" >$5</option>'
+'<option value="$10" >$10</option>'
+'<option value="$15" >$15</option>'
+'<option value="$20" >$20</option>'
+'<option value="$30" >$30</option>'
+'</select>'
+'</div>'
+'<div style="float:left; width: 8%">'
+'<label>Rate Plan</label>'
+'<input id="orate' + oncount + '" name="orate' + oncount + '" type="text" class="input-small" />'
+'</div> '
+'<div style="float:left; width: 8%">'
+'<label>Phone Number</label>'
+'<input id="onumber_act' + oncount + '" name="onumber_act' + oncount + '" type="text" maxlength="10" class="input-small" />'
+'</div>'
+'<div style="float:left; width: 12%">'
+'<label>Notes / Username </label>'
+'<input id="onotes' + oncount + '" name="onotes' + oncount + '" type="text" class="input-medium"/>'
+'<input type="hidden" name="oncounter[]" value="1">'
+'</div>'
+'</div>'
+'</div>'
);
$("#ophone_used"+ oncount).change(function(){
if ($("#ophone_used"+ oncount).val() == "Basic") {
('#odataBasic'+ oncount).show();
$('#odataSmart'+ oncount).hide();
} else {
$('#odataBasic'+ oncount).hide();
$('#odataSmart'+ oncount).show();
}
});
});
});
这是我的追加按钮
<a href="#" class="btn btn-mini btn-danger" id="add_field"><span>Add In-Store Activation</span></a>
我的SQL提交
if(is_array($_POST[oncounter]))
{
$oncount=count($_POST[oncounter]);
for($o=0;$o<=$oncount;$o++)
{
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($_POST["oprocess_where".$o.""])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($_POST["ostatus".$o.""])));
$oupg = mysql_real_escape_string(stripslashes(htmlentities($_POST["oupg".$o.""])));
$oupg_date = date('Y-m-d', strtotime($_POST["oupg_date".$o.""]));
$ophone_used = mysql_real_escape_string(stripslashes(htmlentities($_POST["ophone_used".$o.""])));
$odata = mysql_real_escape_string(stripslashes(htmlentities($_POST["odata".$o.""])));
$odatasmart = mysql_real_escape_string(stripslashes(htmlentities($_POST["odatasmart".$o.""])));
$omessaging = mysql_real_escape_string(stripslashes(htmlentities($_POST["omessaging".$o.""])));
$orate = mysql_real_escape_string(stripslashes(htmlentities($_POST["orate".$o.""])));
$onumber_act = mysql_real_escape_string(stripslashes(htmlentities($_POST["onumber_act".$o.""])));
$onotes = mysql_real_escape_string(stripslashes(htmlentities($_POST["onotes".$o.""])));
$oorderStatus = "Pending";
$oinstore= 0;
$oonline = 1;
$opending = 1;
if($oprocess_where !="")
{
$query="insert into phone_details (process_where, status, upg, upg_date, phone_used, data, datasmart, messaging, rate, number_act, notes, dealID, custID, orderStatus, online, instore, pending)
values ('".$oprocess_where."','".$ostatus."','".$oupg."','".$oupg_date."','".$ophone_used."','".$odata."','".$odatasmart."','".$omessaging."','".$orate."','".$onumber_act."','".$onotes."', '$dealID', $custID, '$oorderStatus', $oonline, $oinstore, $opending)";
mysql_query($query) or die(mysql_error());
}
}
}
答案 0 :(得分：1)
在该div中的某处添加一个按钮
$('#activation').append(
'<div class="row-fluid removethisrow"><button class="remove">Remove</button>'
使用.on()预先绑定该按钮（以.live()的方式工作），因此此JQ可以超出追加函数。
$('#activation').on('click', '.remove', function(){
$(this).closest('.removethisrow').remove();
});
...
但我不会使用name="ostatus' + oncount + '"我会将该值放在行的div中，以防我需要定位其中的内容
$('#activation').append(
'<div class="row-fluid removethisrow" id="oncount_' + oncount + '"><button class="remove">Remove</button>'
并使用一个post数组，因此一旦将oncount发送到服务器，它实际上并不相关。
要么
<input type="radio" name="oprocess_where[]" class="oprocess_where" ... />
和
if(is_array($_POST[oprocess_where])) {
for ($i=0; $i<count($_POST['oprocess_where']); $i++){
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($_POST["oprocess_where"][$i])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($_POST["ostatus"][$i])));
或
<input type="radio" name="rows[]['oprocess_where']" class="oprocess_where" ... />
和
if(is_array($_POST[rows])) {
foreach ($_POST['rows'] as $row) {
$oprocess_where = mysql_real_escape_string(stripslashes(htmlentities($row["oprocess_where"])));
$ostatus = mysql_real_escape_string(stripslashes(htmlentities($row["ostatus"])));
...
但是我不会多次mysql_real_escape_string(stripslashes(htmlentities
foreach ($_POST['rows'] as $row) {
foreach (explode(' ','oprocess_where ostatus oupg oupg_date etc')) as $allowed) {
$insert[$allowed]=mysql_real_escape_string(stripslashes(htmlentities($row[$allowed])));
}
$sql='INSERT INTO phone_details ('.implode(array_keys($insert)).') VALUES ('.implode($insert).')';
}
答案 1 :(得分：0)
您可以使用删除功能，然后将onclick事件附加到您追加的所有内容。如下所示：
function removeElm(elm)
{
$(elm).remove();
}
然后当你追加时，添加如下内容：
<div onclick="removeElm(this)" id="features_remove" style="float:left; width: 11%; margin-left:115px;" >