Question

这是我的div结构

 <div class="row-fluid">
        <div class="span12">
            <div style="overflow: auto; width: 90%;" class="goleft">
                <div style="display: inline-block; width: 200px;">
                    <p>
                        <select name="DropDownList3" id="DropDownList3" class="form-control show-tick">
                            <option value="--Pilih Periode--">--Pilih Periode--</option>
                            <option value="Juni, 2017">Juni, 2017</option>
                            <option value="Juli, 2017">Juli, 2017</option>
                        </select>
                    </p>
                </div>
                <div style="display: inline-block; width: 150px;">
                    <a id="LinkButton3" class="btn btn-primary btn-link-2 btn-block btReload-3 has-spinners" href="javascript:__doPostBack(&#39;LinkButton3&#39;,&#39;&#39;)">Muat Ulang</a>
                </div>
            </div>
        </div>
    </div>
    <div id="bar_chart_container">
        <p>Chart total</p>
        <canvas id="bar_chart" height="250" class="chart"></canvas>
    </div>

id="DropDownList3"时已经改变了，我想删除ID为id="bar_chart"的画布，ID为id="bar_chart_container"的div位于<div class="row-fluid">中未归类的div的最后一个，并附加新画布相同的ID。它是如何用jQuery完成的？

在这里，我到目前为止，但没有像预期的那样完美地工作

var cvs = $('#bar_chart').find(':last-child').not(':only-child').remove(); $('#bar_chart').remove(); $('#bar_chart_container').append('<canvas id="bar_chart" height="250" class="chart"><canvas>'); var ctx = $("#bar_chart").get(0).getContext('2d');

Answer 1

您不需要删除该元素，然后重新创建相同的元素，因为您只需回到与开始时相同的位置。

假设您只想在更改下拉列表时隐藏画布，您只需将onchange事件处理程序附加到<select>框，然后将其绑定到隐藏所需元素的函数。在这里，我创建了一个名为dropdownChange()的函数，并调用onchange="dropdownChange()"。我在画布上添加了一个小边框以帮助清晰。

＆＃13;

function dropdownChange() {
  document.getElementById('bar_chart').style.display = 'none';
}

＆＃13;

#bar_chart {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
  <div class="span12">
    <div style="overflow: auto; width: 90%;" class="goleft">
      <div style="display: inline-block; width: 200px;">
        <p>
          <select name="DropDownList3" id="DropDownList3" class="form-control show-tick" onchange="dropdownChange()">
            <option value="--Pilih Periode--">--Pilih Periode--</option>
            <option value="Juni, 2017">Juni, 2017</option>
            <option value="Juli, 2017">Juli, 2017</option>
          </select>
        </p>
      </div>
      <div style="display: inline-block; width: 150px;">
        <a id="LinkButton3" class="btn btn-primary btn-link-2 btn-block btReload-3 has-spinners" href="javascript:__doPostBack(&#39;LinkButton3&#39;,&#39;&#39;)">Muat Ulang</a>
      </div>
    </div>
  </div>
</div>
<div id="bar_chart_container">
  <p>Chart total</p>
  <canvas id="bar_chart" height="250" class="chart"></canvas>
</div>

＆＃13;

要实际删除元素并重新创建它，您可以使用document.createElement("canvas");创建一个全新的元素，然后使用$('#bar_chart_container').append();插入新创建的画布，如下所示：

＆＃13;

function dropdownChange() {
  document.getElementById('bar_chart').style.display = 'none';
  var new_canvas = document.createElement("canvas"); // Create a <div> node
  new_canvas.style.border = "thick solid #0000FF";
  $('#bar_chart_container').append(new_canvas);
}

＆＃13;

#bar_chart {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
  <div class="span12">
    <div style="overflow: auto; width: 90%;" class="goleft">
      <div style="display: inline-block; width: 200px;">
        <p>
          <select name="DropDownList3" id="DropDownList3" class="form-control show-tick" onchange="dropdownChange()">
            <option value="--Pilih Periode--">--Pilih Periode--</option>
            <option value="Juni, 2017">Juni, 2017</option>
            <option value="Juli, 2017">Juli, 2017</option>
          </select>
        </p>
      </div>
      <div style="display: inline-block; width: 150px;">
        <a id="LinkButton3" class="btn btn-primary btn-link-2 btn-block btReload-3 has-spinners" href="javascript:__doPostBack(&#39;LinkButton3&#39;,&#39;&#39;)">Muat Ulang</a>
      </div>
    </div>
  </div>
</div>
<div id="bar_chart_container">
  <p>Chart total</p>
  <canvas id="bar_chart" height="250" class="chart"></canvas>
</div>

＆＃13;

希望这有帮助！：）

ASP.NET jQuery：当下拉列表发生变化时，如何删除另一个div元素之外的div元素？

1 个答案: