删除/按钮点击

Question

我想建立一个表单，用户可以添加使用选择框课程删除隐藏字段值的一部分。

当加入过程中，它创建一个新的表行显示的过程中给用户，并且还增加了过程前缀和数目（例如MATH120）到一个隐藏的表单字段值。最后，它添加了一个删除按钮。

删除按钮应该删除表行和对应于课程被删除隐藏的输入值。

这里是我的jsfiddle：http://jsfiddle.net/MtJF2/10/

我的脚本删除行就好了，但它无法正常删除的输入值。它不会抛出任何错误。有时我注意到它会删除正确值中的零（例如MATH120，成为MATH12，）。任何想法可能会造成这种情况？

HTML：

<script type="text/javascript"> 
    function deleteCourse($course){ 
    $('#' + $course).remove(); 
    $course = $course + ',' 
    alert($course); 
    $('#required-courses').val(function($course, value) { 
    return value.replace($course, ''); 
}); 
} 
</script> 
<table width="80%" align="center"> 
    <tr id="add-required-course"> 
     <td><input type="button" value="+ Add a Required Course" class="MC-big-button" onclick="$('#course-menu').slideToggle()" /></td> 
    </tr> 
</table> 
<input type="hidden" id="required-courses" name="required-courses" value="null" /> 
<table id="course-menu" width="80%" align="center"> 
    <tr> 
     <td>Select the course prefix:</td> 
     <td><select id="1" name="course-prefix"> 
       <option value="MATH">MATH</option> 
       <option value="BIOL">BIOL</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Select the course number:</td> 
     <td><select id="2" name="course-num"> 
      <option value="101">101</option> 
      <option value="120">120</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <input type="button" value="Add this course" class="MC-big-button" id="save-course" /> 
     </td> 
    </tr> 
</table> 

的Javascript：

document.getElementById("save-course").onclick = buildCourse; 

function buildCourse() { 
    var $coursePrefix = ($('#1').val()); 
    var $courseNum = ($('#2').val()); 
    var $course = $coursePrefix + $courseNum; 
    var $HTMLoutput = '<tr id="' + $course + '"><td>' + $course + '<input type="button" value="Delete" onclick="deleteCourse(\'' + $course + '\')" /></td></tr>'; 
    var $VALUEoutput = ($('#required-courses').val()); 
    if ($VALUEoutput == 'null') { 
     $VALUEoutput = $course + ','; 
    } 
    else { 
     $VALUEoutput = $VALUEoutput + $course + ','; 
    } 
    $('#course-menu').slideToggle(); 
    $('#add-required-course').before($HTMLoutput); 
    $('#required-courses').val($VALUEoutput);  
} 

我发现this question是有益的，但我想我的实现是关闭的。

Answer 1

您在

$('#required-courses').val(function($course, value) { 
// here it gets a new value which is wrong 

与删除功能的新值替换$course使用方法如下

function deleteCourse($course){ 

    $('#' + $course).remove(); 
    $course = $course + ',' 
    alert($course); 

    $('#required-courses').val(function(_, value) { 
      return value.replace($course, ''); 
    }); 
}