sk89q/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Deduplicate Spotify tracks based on track artist and title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
    padding: 40px;
}
#input {
    width: 90%;
    height: 200px;
    border: 2px solid red;
    overflow: auto;
}
#output {
    width: 90%;
    height: 200px;
}
</style>
</head>
<body>

<div class="container">
    <h1>Deduplicate Spotify tracks (based on track name)</h1>

    <p>Drag your playlist into here:</p>
    <div id="input" contenteditable="true"></div>

    <br>

    <p>Then click this button: <button class="btn btn-primary" id="deduplicate">Deduplicate</button></p>

    <hr>

    <h2>Results</h2>

    <p>Then drag/paste this into your playlist (after clearing your playlist):</p>
    <textarea id="output"></textarea>

    <p><span class="label label-info">Tip:</span> The input box above now lists tracks that were removed.</p>

    <hr>

    <p>By <a href="http://twitter.com/sk89q">@sk89q</a></p>
</div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var $input = $("#input");
var $output = $("#output");

$("#deduplicate").on("click", function (e) {
    var found = {};
    var results = [];
    var left = [];

    $input.find("a").each(function () {
        var $this = $(this);
        var name = $this.text();
        var url = $this.attr('href');

        if (!found.hasOwnProperty(name)) {
            found[name] = url;
            results.push(url);
            $this.remove();
        } else {
            left.push($this);
            left.push("<br >");
        }
    });

    $input.empty().append(left);
    $output.val(results.join("\n"));
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Deduplicate Spotify tracks based on track artist and title</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<style>
	body {
	padding: 40px;
	}
	#input {
	width: 90%;
	height: 200px;
	border: 2px solid red;
	overflow: auto;
	}
	#output {
	width: 90%;
	height: 200px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h1>Deduplicate Spotify tracks (based on track name)</h1>

	<p>Drag your playlist into here:</p>
	<div id="input" contenteditable="true"></div>

	<br>

	<p>Then click this button: <button class="btn btn-primary" id="deduplicate">Deduplicate</button></p>

	<hr>

	<h2>Results</h2>

	<p>Then drag/paste this into your playlist (after clearing your playlist):</p>
	<textarea id="output"></textarea>

	<p><span class="label label-info">Tip:</span> The input box above now lists tracks that were removed.</p>

	<hr>

	<p>By <a href="http://twitter.com/sk89q">@sk89q</a></p>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>
	var $input = $("#input");
	var $output = $("#output");

	$("#deduplicate").on("click", function (e) {
	var found = {};
	var results = [];
	var left = [];

	$input.find("a").each(function () {
	var $this = $(this);
	var name = $this.text();
	var url = $this.attr('href');

	if (!found.hasOwnProperty(name)) {
	found[name] = url;
	results.push(url);
	$this.remove();
	} else {
	left.push($this);
	left.push("<br >");
	}
	});

	$input.empty().append(left);
	$output.val(results.join("\n"));
	});
	</script>

	</body>
	</html>