добавление html в правильное положение документа с использованием java-скрипта

Question

Я написал для этого код: я хочу иметь форму для поиска, всякий раз, когда пользователь нажимал на дно удаления, все html-таблицы в этой строке должны быть удалены (весь div), и всякий раз, когда они нажимают на слово добавления слова, необходимо добавить другую группу поля для поиска. то же самое для добавления нижней части группы. после того, как вы нажмете на добавление дна группы, весь набор полей должен повторить и следующим кликом снова и снова. теперь проблема заключается в том, где добавить и что удалить! поскольку вы видите, что форма копируется и ее из моего контроля удаляет или добавляет то, что я хочу (например, после нажатия на кнопку «Удалить» в первой строке только первая строка должна уходить не на других. Надеюсь, я понятен. любое решение?

<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> 

Answer 1

Попробуйте

function DoDelete(){ 
$(this).closest('div').remove(); 
} 

Добавить идентификатор в TD, который содержит W как этот

<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> "); 
} 

Answer 2

Вы должны попробовать включить элемент, который вы нажимаете в методах javascript, которые вы вызываете в событии onClick.

<input type="submit" name="delete" value="delete" onclick="DoDelete(this)" /> 

В своих методах действий вы указываете элемент, в котором вы выполняете действие вместо того, чтобы сделать их гибкими для использования их в любом элементе.