我为此目的编写了这段代码:我想有一个搜索表单,每当用户单击删除底部时,该行中的所有html页面都必须删除(整个div),并且每当他们单击添加词底部时,必须添加另一组用于搜索的字段。add group bottom也是一样。单击添加组底部后,所有字段设置应重复,并由下一个点击一次又一次。现在的问题是在哪里添加和删除什么!!正如你所看到的形式是复制的,它超出了我的控制,删除或添加我想要的(例如,在第一行点击删除底部后,第一行必须离开,而不是其他人。我希望我说得很清楚。有解决办法吗?
<form action="search1.php" method="post">
<fieldset style="width:50%;" id="g1">
<legend>search form</legend>
<table>
<tr>
<td style="border-left:1px solid #000">
<select name="opration" size="1">
<option>AND</option>
<option>OR</option>
</select>
</td>
<td>
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</br>
<div id="w1">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonime
<input type="checkbox" name="checkfield" />
</div>
</br>
<input type="submit" name="addw" value="add word" onclick="DoAddW()" />
</td>
</tr>
</table>
</fieldset>
<input type="submit" name="addg" value="add group" onclick="DoAddG()" />
</br>
<input type="submit" name="search" value="search" />
</form>
<script>
function DoDelete() {
$("w1").remove();
}
function DoAddW() {
alert("add word");
$("#w").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}
function DoAddG() {
alert("add group");
$("#g").append(" <fieldset style='width:50%;' id='g1'><legend>serach form</legend><table><tr><td style='border-left:1px solid #000'><select name='opration' size='1'><option>AND</option><option>OR</option>/select></td><td><div id='w1'><input type='text' name='textfield' placeholder='search here' /><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /></div></br><input type='submit' name='addw' value='add word' onclick='DoAddW()'/></td></tr></table></fieldset>
");
}
function DoAlert() {
alert("I want to add some synonimes")
}
</script>
你应该尝试在onClick事件中调用的javascript方法中包含你点击的元素。
<input type="submit" name="delete" value="delete" onclick="DoDelete(this)" />
在你的动作方法中,你指定的是在其中执行动作的元素,而不是使它们能够灵活地在任何元素中使用。
试试这个
function DoDelete(){
$(this).closest('div').remove();
}
像这样将id添加到包含W的td中
<td id="forW">
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</td>
function DoAddW() {
alert("add word");
$("#forW").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}