我添加了两个按钮addOption和removeOption,我已经写了jquery,但删除按钮不起作用

时间:2015-08-12 17:26:11

标签: jquery html5

这是我的ftl页面。

[<form action="questionDetail" method="post">
        <div class="outerDiv">
            <textarea rows="4" cols="50" class="font">${question.question}</textarea>
            <input type="hidden" id="questType" value="${question.type}" />
            <ul id="list">
               <#list question.options as option>
                    <li class="font">
                        <#if question.type == 0>
                            <input type="checkbox" value="" />
                        <#elseif question.type == 1 || question.type == 2>
                            <input type="radio" value="" />
                        </#if>
                        <textarea rows="4" cols="100" >
                        <#if option ??>${option}</#if>
                        </textarea>
                    </li>
                </#list>
            </ul>
            <input type="button" id="addOption" class="button" value="+" /><label class="opt">Add Option</label>   
            <input type="button" id="removeOption" class="button" value="-" /><label class="opt">Remove option</label>
            <p><input type="submit" id="updateMCMO" class="button updateButton btn1" value="Update"/></p>
        </div>
    </form>

这是我的jquery

    $(document).ready(function() {
         $(document).on('click','#addOption', function(){
             if($('#questType').val() == 0){
                 $("#list").append('<li><input  type="checkbox" value="" /> <textarea rows="4" cols="92"></textarea></li>');
             }else {
                 $("#list").append('<li><input  type="radio" value="" /> <textarea rows="4" cols="92"></textarea></li>');
             }

         });
         $(document).on('click','#removeOption', function() {
             $('#list').each(function(){

             if($('#questType').val() == 0){
                 {
                     $(this).closest('li').remove();
                 }

             }
             else{
                 if($(this).find('input\[type=radio\]').is(':checked')){
                     $(this).closest('li').remove();
                 }
             }
             });
          });
        });

能够添加更多选项,但我坚持要删除它。我没有得到如何删除这些选项。请帮帮忙。

我的removeOption按钮不起作用请有人告诉我哪里出错了。谢谢

1 个答案:

答案 0 :(得分:0)

对于删除选项,您正在迭代#list,其中您的html似乎是带有ID列表的ul。所以$(this).closest('li')什么都不返回。更改后面的#removeOption点击处理程序,它应该可以正常工作。

     $(document).on('click','#removeOption', function() {
         $('li').each(function(){

         if($('#questType').val() == 0){
             {
                 $(this).remove();
             }

         }
         else{
             if($(this).find('input[type=radio]').is(':checked')){
                 $(this).remove();
             }
         }
         });
      });