Unknown element in JQUery click

Question

Hi, I am having a Html generated using JQUery and its like

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

I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..

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

Though it'd be easier if you put each choice in a div.

Answer 2

Try the following instead:

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