Question

我似乎无法获取删除链接以删除最后添加的html字段并更新正在计算的总数。我也希望计算发生在onblur而不是点击，因为目前我必须添加一个空白的最后一个产品来获得更新总数。

JQuery的

<script>
var counter = 1;
function addNumber(divName){    
  var sum = document.getElementById('product_cost');
  var newdiv = document.createElement('div');
  newdiv.id = 'product_' + counter + '';
  newdiv.className = 'additional_product';
  newdiv.innerHTML = "<div class='product_fields_inner'><select id='courses' class='course_name_dropdown'><option value='Course1'>Course 1</option></select><select id='delivery' class='delivery_mode_dropdown'><option value='Face to face'>Face to Face</option></select><input type='text' class='course_cost_text_field' name='number" + counter + "'><input class='course_cost_text_field' type='text'><input class='course_cost_text_field' type='date'></div><a href='#' class='remove' id='remove'>-</a>";
  document.getElementById(divName).appendChild(newdiv);
  sum.value = getSum(counter);
  counter++;    
}

function getSum(numberOfDivs){
   var sum = 0;
   for (var i=0 ; i<numberOfDivs; i++) {
     sum += parseInt(document.getElementsByName('number' + i)[0].value);
    }
   return sum;
}

$("html").on('click', 'a#remove', function(){
   $('#total #product_' + counter + '').last().remove();
});

</script>

HTML

<div id="total" class="product_fields">
  <div id="product_0">
    <div class="product_fields_inner">
      <select class="course_name_dropdown" name="product_description[]" value="">
        <option id="Course1" value="Course1">Course 1</option>
      </select>
      <select class="delivery_mode_dropdown" name="delivery_mode[]">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <input class="course_cost_text_field" type="text" id="course_cost_1" 
name="number0">
      <input class="course_cost_text_field" type="text" name="location[]">
      <input class="course_cost_text_field" type="date" name="start_date[]">
    </div>
  </div>
</div>

Answer 1

你可以像这样定位你的元素：

$('#total div[id^="product_"]:last-child').remove();

var counter = 1;
function addNumber(divName){    
  var sum = document.getElementById('product_cost');
  var newdiv = document.createElement('div');
  newdiv.id = 'product_' + counter + '';
  newdiv.className = 'additional_product';
  newdiv.innerHTML = "<div class='product_fields_inner'><select id='courses' class='course_name_dropdown'><option value='Course1'>Course 1</option></select><select id='delivery' class='delivery_mode_dropdown'><option value='Face to face'>Face to Face</option></select><input type='text' class='course_cost_text_field' name='number" + counter + "'><input class='course_cost_text_field' type='text'><input class='course_cost_text_field' type='date'></div><a href='#' class='remove' id='remove'>-</a>";
  document.getElementById(divName).appendChild(newdiv);
  sum.value = getSum(counter);
  counter++;    
}

function getSum(numberOfDivs){
   var sum = 0;
   for (var i=0 ; i<numberOfDivs; i++) {
     sum += parseInt(document.getElementsByName('number' + i)[0].value);
    }
   return sum;
}

$("html").on('click', 'a#remove', function(){
   $('#total div[id^="product_"]:last-child').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="total" class="product_fields"><a href="#" id="remove">remove</a>
  <div id="product_0">
    <div class="product_fields_inner">
      <select class="course_name_dropdown" name="product_description[]" value="">
        <option id="Course1" value="Course1">Course 1</option>
      </select>
      <select class="delivery_mode_dropdown" name="delivery_mode[]">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <input class="course_cost_text_field" type="text" id="course_cost_1" 
name="number0">
      <input class="course_cost_text_field" type="text" name="location[]">
      <input class="course_cost_text_field" type="date" name="start_date[]">
    </div>
  </div>
  
  <div id="product_1">
    <div class="product_fields_inner">
      <select class="course_name_dropdown" name="product_description[]" value="">
        <option id="Course1" value="Course1">Course 1</option>
      </select>
      <select class="delivery_mode_dropdown" name="delivery_mode[]">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <input class="course_cost_text_field" type="text" id="course_cost_1" 
name="number0">
      <input class="course_cost_text_field" type="text" name="location[]">
      <input class="course_cost_text_field" type="date" name="start_date[]">
    </div>
  </div>
</div>

如何删除最后添加的innerhtml并更新总计

1 个答案: