使用Java脚本在文档的正确位置添加HTML


adding html in correct position of document using java script

我为此目的编写了这段代码:我想有一个搜索表单,每当用户单击删除底部时,该行中的所有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> ");
}