Question

我正在使用JQUery及其类似

生成Html

<p class="fieldChoices title" style="">
  Choices:
  <input id="Choice1" value="option1" maxlength="150"/>
  <div class="seperator"/>
  <p class="deleteChoice1 cutsom_button deleteField"></p>
  <div class="seperator"/>
  <input id="Choice2" value="option2" maxlength="150"/>
  <div class="seperator"/>
  <p class="deleteChoice2 cutsom_button deleteField"></p>
  <div class="seperator"/>
</p>

我正在尝试点击deleteChoice1，必须使用JQuery从.fieldChoices中删除相应的Choice1 ..

另外我可能不知道在JQuery中我是否点击了deleteChoice1 / deleteChoice2 ,, 所以我不知道如何使用JQuery解决它。请指教我......

Answer 1

$(".deleteField").click(function(){
  $(this).prevAll("input:first").remove();
  $(this).prevAll(".seperator").remove();
  $(this).remove();
});

虽然将每个选项放在div中会更容易。

Answer 2

请尝试以下方法：

<p class="fieldChoices title" style="">
  Choices:
  <fieldset>
    <input id="Choice1" value="option1" maxlength="150"/>
    <div class="seperator"/>
    <span class="cutsom_button deleteField"></span>
  </fieldset>
  <fieldset>
    <input id="Choice2" value="option2" maxlength="150"/>
    <div class="seperator"/>
    <span class="cutsom_button deleteField"></span>
  </fieldset>
</p>

$("deleteField").bind("click", function(){
  $(this).parent().remove();
}

Answer 3

HTML：

<fieldset class="fieldChoices title">
  <legend>Choices</legend>
  <ul>
  <li>
      <input id="Choice1" value="option1" maxlength="150"/>
      <span class="deleteChoice cutsom_button deleteField"></span>
  </li>
  <li>
      <input id="Choice2" value="option2" maxlength="150"/>
      <span class="deleteChoice cutsom_button deleteField"></span>
  </li>
  </ul>
</fieldset>

jquery的：

$(".fieldChoices li").each(function() {
         var choice = $(this);
       $(".deleteChoice", this).click(function() {
           choice.remove();
        });
      });

JQUery中的未知元素单击

3 个答案: