CODEWITHSUNDEEP
javascriptjquerydropzone.js
renat natanael
renat natanael

Reputation: 137

create new element inside element

I want styling a button remove link in dropzone js. I just want it to look like bootstrap button with glyphicon.

instead like default dropzone code like this 

Dropzone.prototype.defaultOptions = {
    dictRemoveFile: "Remove file",
        if (this.options.addRemoveLinks) {
            file._removeLink = Dropzone.createElement("<a class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove>" + this.options.dictRemoveFile + "</a>");
            var custom = Dropzone.createElement("<div class=\"custom\"></div>");
            custom.appendChild(file._removeLink);
            file.previewElement.appendChild(custom);
        }

with the result like this

  <a class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove="">Remove file</a>

I want the result like this

<div class="custom">
<button type="button" class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>

so I add a code in dropzone.js like this

file._removeLink = Dropzone.createElement("<button type=\"button\" class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove aria-label=\"Left Align\">" + this.options.dictRemoveFile + "</button>");
var custom = Dropzone.createElement("<div class=\"custom-btn\"></div>");
var span = Dropzone.createElement("<span class=\"glyphicon glyphicon-align-left\" aria-hidden=\"true\"></span>");
custom.appendChild(file._removeLink);
file.previewElement.appendChild(custom);
span.appendChild(file._removeLink);//i think i code this wrong//
file.previewElement.appendChild(span);//i think i code this wrong too//

for now I only success to make 

<div class="custom">
    <button type="button" class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove aria-label="Left Align"> 
    </button>
</div>

the problem only the tag span inside button left (it didn't show up).

Upvotes: 2

Views: 282

Answers (1)

Rohit Agre
Rohit Agre

Reputation: 1528

file._removeLink = Dropzone.createElement("<button type=\"button\" class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove aria-label=\"Left Align\">" + this.options.dictRemoveFile + "</button>");
var custom = Dropzone.createElement("<div class=\"custom-btn\"></div>");
var span = Dropzone.createElement("<span class=\"glyphicon glyphicon-align-left\" aria-hidden=\"true\"></span>");
file._removeLink.appendChild(span);
custom.appendChild(file._removeLink);
file.previewElement.appendChild(custom);

Try the above code. Should work

Upvotes: 0

Related Questions