原型JS不删除选择元素

PrototypeJS not removing select element

本文关键字:选择 元素 删除 JS 原型      更新时间:2023-09-26

鉴于以下 HTML,我正在尝试删除所有表单元素。我遇到的问题是没有删除select元素,而是每次调用删除代码时都会删除其中的第一个option。请参阅 http://jsfiddle.net/b8FfT/

.HTML

<fieldset>
  <div id="order_history_block">
    <div id="history_form" class="order-history-form">
      <div>Add Order Comments</div>
      <span class="field-row">
        <label class="normal" for="history_status">Status</label><br>
        <select name="history[status]" class="select" id="history_status">
          <option value="processing">Ok to Ship</option>
          <option value="pending" selected="selected">Pending</option>
        </select>
      </span>
      <span class="field-row">
          <label class="normal" for="history_comment">Comment</label>
          <textarea name="history[comment]" rows="3" cols="5" style="height:6em; width:99%;" id="history_comment"></textarea>
      </span>
      <div class="f-left">
        <input name="history[is_visible_on_front]" type="checkbox" id="history_visible" value="1"><label class="normal" for="history_visible"> Visible on Frontend</label>
      </div>
      <div class="f-right">
        <button id="id_79ae3bd75916862b0245fbcb3343d24e" title="Submit Comment" type="button" class="scalable save" onclick="doStuff()" style=""><span><span><span>Submit Comment</span></span></span></button>
      </div>
      <div class="clear"></div>
    </div>
    <div class="divider"></div>
    <!-- ... -->
  </div>
</fieldset>

.JS

var a = $('order_history_block').parentNode;
$(a).select('input', 'select', 'textarea').invoke('remove');

所以 HTMLSelectElement 原型(不是框架)有自己的remove()方法,当你在 <select> 上调用 remove() 时,它不会沿着原型链向上遍历到 PrototypeJS 添加的 HTMLElement remove()方法。

2个选项给你

$('history_status').parentNode.removeChild($('history_status'));

Element.remove($('history_status'));

我也为此提交了错误报告

https://github.com/sstephenson/prototype/issues/122

编辑

像这样使用 CSS 选择器和 select() 方法

$('order_history_block').up().select('select').each(function(item){
    Element.remove(item);
});