DataTransferItemList: remove() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
The remove() method of the DataTransferItemList interface removes the DataTransferItem at the specified index from the list. If the index is less than zero or greater than one less than the length of the list, the list will not be changed.
During a drag operation, this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writable. Calling it from any other drag event throws an InvalidStateError DOMException. See Modifying the drag data store for details.
Syntax
remove(index)
Parameters
index-
The zero-based index number of the item in the drag data list to remove. If the
indexdoesn't correspond to an existing item in the list, the list is left unchanged.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMException-
Thrown if the drag data store is not in read/write mode and so the item cannot be removed.
Examples
Dragging and dropping an element
This example shows the use of the remove() method.
HTML
<div>
<p id="source" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</p>
</div>
<div id="target">Drop Zone</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
function dragstartHandler(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
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// Add some other items to the drag payload
dataList.add("<p>Paragraph…</p>", "text/html");
dataList.add("http://www.example.org", "text/uri-list");
}
function dropHandler(ev) {
console.log("Drop");
ev.preventDefault();
const data = event.dataTransfer.items;
// Loop through the dropped items and log their data
for (const item of data) {
if (item.kind === "string" && item.type.match("^text/plain")) {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match("^text/html")) {
// Drag data item is HTML
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match("^text/uri-list")) {
// Drag data item is URI
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
}
function dragoverHandler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
}
function dragendHandler(ev) {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
// Clear all the files. Iterate in reverse order to safely remove.
for (let i = dataList.length - 1; i >= 0; i--) {
if (dataList[i].kind === "file") {
dataList.remove(i);
}
}
// Clear any remaining drag data
dataList.clear();
}
const source = document.querySelector("#source");
source.addEventListener("dragstart", dragstartHandler);
source.addEventListener("dragend", dragendHandler);
const target = document.querySelector("#target");
target.addEventListener("drop", dropHandler);
target.addEventListener("dragover", dragoverHandler);
Result
Specifications
| Specification |
|---|
| HTML # dom-datatransferitemlist-remove-dev |