DataTransfer.clearData() — Methode · JavaScript-Referenz

Signatur

DataTransfer.prototype.clearData(format)

Beschreibung

Mit clearData() werden Daten aus dem DataTransfer-Objekt eines Drag-and-Drop-Vorgangs (oder eines Zwischenablage-Ereignisses) wieder entfernt. Übergibt man einen MIME-Typ wie "text/plain", wird nur dieser Eintrag gelöscht. Ohne Argument oder mit einem leeren String werden alle Daten entfernt.

Das ist nützlich, wenn der Browser beim Ziehen automatisch Standarddaten einträgt – etwa beim Ziehen eines Links (text/uri-list, text/html) oder eines Bildes – und du stattdessen nur eigene, kontrollierte Formate mitgeben willst. Typischerweise ruft man clearData() im dragstart-Handler auf, bevor man mit setData() die gewünschten Daten setzt.

Wichtig: Schreibzugriff auf den Datenspeicher ist nur im Read/Write-Modus möglich, also im dragstart-Ereignis (bzw. bei copy/cut). In anderen Drag-Ereignissen wie dragover oder drop hat der Aufruf keine Wirkung. Dateien (Einträge vom Typ "Files") lassen sich mit clearData() nicht entfernen.

Parameter

Name	Typ	Default	Beschreibung
$format	string	"" (alle Formate)	MIME-Typ des zu löschenden Eintrags, z. B. `"text/plain"` oder `"text/uri-list"`. Fehlt der Parameter oder ist er ein leerer String, werden alle Daten entfernt. Die Groß-/Kleinschreibung wird ignoriert (intern in Kleinbuchstaben umgewandelt).

Beispiele

Standarddaten eines Links ersetzen

const link = document.querySelector('a.draggable');

link.addEventListener('dragstart', (event) => {
  const dt = event.dataTransfer;
  // Vom Browser vorbelegte Daten (URL, HTML, Text) komplett entfernen
  dt.clearData();
  // Nur eigene Daten mitgeben
  dt.setData('application/x-produkt-id', link.dataset.id);
  dt.setData('text/plain', `Produkt #${link.dataset.id}`);
  console.log([...dt.types]);
});

["application/x-produkt-id", "text/plain"]

Nur ein bestimmtes Format löschen

const card = document.querySelector('#karte');

card.addEventListener('dragstart', (event) => {
  const dt = event.dataTransfer;
  dt.setData('text/plain', 'Karte 42');
  dt.setData('text/html', '<strong>Karte 42</strong>');

  // HTML soll nicht in fremde Editoren gezogen werden
  dt.clearData('text/html');
  console.log(dt.getData('text/html') === '', [...dt.types]);
});

true ["text/plain"]

Wirkungslos außerhalb von dragstart

const zone = document.querySelector('#ablage');

zone.addEventListener('dragover', (event) => event.preventDefault());

zone.addEventListener('drop', (event) => {
  event.preventDefault();
  // Im drop-Handler ist der Datenspeicher schreibgeschützt
  event.dataTransfer.clearData('text/plain');
  console.log(event.dataTransfer.getData('text/plain'));
});

Karte 42 (Daten bleiben erhalten)

Zwischenablage beim Kopieren bereinigen

document.addEventListener('copy', (event) => {
  const auswahl = document.getSelection().toString();
  event.clipboardData.clearData();
  event.clipboardData.setData('text/plain', `${auswahl}\n— Quelle: programmierung.net`);
  event.preventDefault(); // eigene Daten statt Standardverhalten
});

// Wichtig · Fallstricke

Nur im Read/Write-Modus: Änderungen wirken nur in dragstart (bzw. copy/cut/paste über clipboardData). In drag, dragover, drop usw. wird der Aufruf still ignoriert.
Dateien bleiben: Einträge vom Typ "Files" werden nicht entfernt; dataTransfer.files bleibt unverändert.
Ein unbekanntes Format führt zu keinem Fehler – prüfe bei Bedarf vorher mit dataTransfer.types.includes(format).
Nach clearData() ohne Argument sind auch vom Browser gesetzte Standardformate weg; gib bei Links ggf. text/uri-list selbst neu an, damit das Ziehen in andere Anwendungen weiter funktioniert.
Für feinere Kontrolle (einzelne Einträge, Dateien) bietet sich dataTransfer.items (DataTransferItemList.remove()/clear()) an.
Kompatibilität: von allen modernen Browsern unterstützt; ältere Internet-Explorer-Versionen akzeptierten nur "Text" und "URL" als Formate.

Siehe auch

DataTransfer.addElement() DataTransfer.getData() DataTransfer.setData() DataTransfer.setDragImage() DataTransferItemList.add()