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>

我在试图点击删除Choice1, 相应的选择必须从使用JQuery的菲尔德Choices中删除。

Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,, so i dont know how to resolve it using JQuery..please suggest me....

Answer 1

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

虽然如果你把每一个选择放在一片 d子里,那是比较容易的。

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

友情链接