---
title: DataTransferItemList.clear()
slug: Web/API/DataTransferItemList/clear
tags:
  - API
  - DataTransferItemList
  - HTML DOM
  - HTML Drag and Drop API
  - Method
  - Reference
  - clear
  - ドラッグアンドドロップ
translation_of: Web/API/DataTransferItemList/clear
---
<p><span class="seoSummary">{{domxref("DataTransferItemList")}} の <strong><code>clear()</code></strong> メソッドは、ドラッグデータアイテムリストからすべての {{domxref("DataTransferItem")}} オブジェクトを削除し、リストを空にします。</span></p>

<p>このリストが保持されるドラッグデータストアは、 {{event("dragstart")}} イベントの処理中にのみ書き込み可能になります。 {{event("drop")}} を処理する間、ドラッグデータストアは読み取り専用モードであり、このメソッドは何もしません。例外も投げません。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox"><em>DataTransferItemList</em>.clear();
</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<p>なし。</p>

<h3 id="Return_Value" name="Return_Value">返値</h3>

<p>{{jsxref("undefined")}}</p>

<h2 id="Example" name="Example">例</h2>

<p>この例は <code>clear()</code> メソッドの使い方を示します。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html"> &lt;div&gt;
   &lt;p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"&gt;
     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">function dragstart_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  var dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("&lt;p&gt;... paragraph ...&lt;/p&gt;", "text/html");
  dataList.add("http://www.example.org","text/uri-list");
}

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  var data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (var i = 0; i &lt; data.length; i++) {
    if ((data[i].kind == 'string') &amp;&amp; (data[i].type.match('^text/plain'))) {
      // This item is the target node
      data[i].getAsString(function (s){
        ev.target.appendChild(document.getElementById(s));
      });
    } else if ((data[i].kind == 'string') &amp;&amp; (data[i].type.match('^text/html'))) {
      // Drag data item is HTML
      data[i].getAsString(function (s){
        console.log("... Drop: HTML = " + s);
      });
    } else if ((data[i].kind == 'string') &amp;&amp; (data[i].type.match('^text/uri-list'))) {
      // Drag data item is URI
      data[i].getAsString(function (s){
        console.log("... Drop: URI = " + s);
      });
    }
  }
}

function dragover_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move"
}

function dragend_handler(ev) {
  console.log("dragEnd");
  var dataList = ev.dataTransfer.items;
  for (var i = 0; i &lt; dataList.length; i++) {
    dataList.remove(i);
  }
  // Clear any remaining drag data
  dataList.clear();
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Example', 400, 300)}}</p>

<p>{{LiveSampleLink('Example','Result link')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitemlist-clear','clear()')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitemlist-clear','clear()')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>W3C HTML5 {{Spec2('HTML5 W3C')}} には含まれていない</td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p>{{Compat("api.DataTransferItemList.clear")}}</p>

<div>{{APIRef("HTML Drag and Drop API")}}</div>