如果未选中,如何删除附加值

时间:2016-11-28 08:29:53

标签: javascript jquery html css checkbox

这是我的脚本我检查tr将附加到视图,我想删除它,当我点击取消选中。

css 3 has to be removed because  have unchecked it.

check and uncheck is happening from here

$("#jobSkills").on('change', '.selectPiSkill', function() {
    var count = $(this).attr('count');
    if (this.checked) {
        var title = $('#skill_' + count + '_title').val();
        var weightage = $('#skill_' + count + '_weightage').val();
        $('#PiSkills tr:last').after('<tr class="' + count + '"><td class="col-xs-4"><input value="' + title + '" readonly class="form-control text-center"></td><td class="col-xs-4"><input value="' + weightage + '" readonly class="form-control text-center" type="text"></td></tr>');
    } else {
        //unchecked remove tr
        $('#PiSkills tr.' + count).remove();
    }
});
<table id="PiSkills" class="table table-responsive" style="margin-bottom:5px">
    <tr>
        <th width="450"><input type="text" readonly value="Skill" class="form-control text-center">  </th>
        <th width="450"><input type="text" readonly value="Weightage(%)" class="form-control text-center"> </th>
    </tr>
</table>

2 个答案:

答案 0 :(得分:2)

我不确定这是不是你想要的。

以下是删除表

中的行的示例

HTML

<table class='test'>
<tr>
  <th>Name</th>
  <th>Test 1</th>
  <th>Test 2</th>
  <th>Optional</th>
</tr>
<tr>
  <td>A</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox" checked="checked"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr>
  <td>B</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
<tr>
  <td>C</td>
  <td><input class='test1' type="checkbox"></td>
  <td><input class='test2' type="checkbox" checked="checked"></td>
  <td><button class='opt1'>REMOVE</button></td>
</tr>
</table>
<br>
<div class='result'>

</div>

JAVASCRIPT

$(".opt1").on("click",function(){
  var q = $(this);
  $(".result").css("border","1px solid red").html(q.parents("tr").html()).append( "<b>This row has been removed</b>" );
  q.parents("tr").remove();
});

$(".test2").on("click",function(){
  var q = $(this);

  if(!q.is(":checked")){
    $(".result").css("border","1px solid red").html(q.parents("tr").html()).append( "<b>This row has been removed</b>" );
    q.parents("tr").remove();
  }else{
    alert("CHECKED");
    $(".result").text("NEW CHECKED");
  }

});

jsfiddle中的示例:https://jsfiddle.net/synz/ot2jp5uL/

@ this 1? :https://jsfiddle.net/synz/zwom17uw/2/

答案 1 :(得分:1)

不确定,但这可能会有所帮助,请更改

 $('#PiSkills tr').each(function(){
      if($(this).attr('class') == count){
       $(this).remove();
      }
   })