Как очистить предыдущие добавленные данные об изменении выпадающего списка?

Question

У меня есть выпадающий список, и на изменения я добавляю div. Это работает для меня, но проблема в том, что я добавляю div, и когда я меняю выпадающий список, то показывается предыдущий div. Я должен удалить предыдущий div и отобразить текущий div в соответствии с выпадающим значением.

Я попробовал код ниже. Я попытался удалить последнее добавление, используя $(event.target).closest('.row').html("");, но он удаляет все мои div, включая выпадающий список.

$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

// Mark what ever you want to do empty here.
// before every change event occurs it will empty your div first then it will append the new one.
$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

Надеюсь, это поможет ... !!

Answer 2

$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(".inputappenddiv").html('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(".inputappenddiv").html('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(".inputappenddiv").html('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(".inputappenddiv").html('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>
  <div class="inputappenddiv">
    
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 3

Вы должны удалить детей строки, кроме первого ребенка в вашем случае.

$('.pp_fileStatus').on('change', function(event) {
  $(event.target).closest('.row').children().not('.select-div').remove();
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

<div class="row">
  <div class="select-div col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 4

$('.pp_fileStatus').on('change', function(event) {
$(".input-wrapper").remove();
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>