刪除/按鈕點擊

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, ''); 
    }); 
}