samedi 4 février 2017

Javascript - removing last added div?

So, I'm learning Javascript and ran into an issue. I have a function that will add some boxes, when I click "Add Data", I can click this multiple times, but I want to be able to have a button called "Remove Data" that would allow me to remove the last one I added.

Code can be found here.

http://ift.tt/2l9Nbms

<link rel="stylesheet" href="http://ift.tt/1jAc5cP" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://ift.tt/1QgFFRj" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="http://ift.tt/2l5zqZt"></script>
<style>
    .hidden{display:none;}
    .self-input {
        padding: 5px;
    }
    .green {
        color: #5b7762;
    }
    textarea, input{ font-family:monospace; }
</style>

<div class="container">
<form>
    <div class="form-group">
        <label class="control-label" for="chartType">Chart type: </label>
        <label class="radio-inline">
            <input type="radio" name="chartType" checked id="piechart" value="piechart" onclick="findChartType()">Pie chart
        </label>


    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-default" value="Add data" onClick="addInput()">Add data <i class="fa fa-plus-circle green" aria-hidden="true"></i></button>
    </div>
    <div id="inputArea"></div>
    <div class="btn-group">
    <button type="button" class="btn btn-primary" value="Generate chart shortcode" onClick="generateString(), datastring()">Generate chart shortcode</button>
    </div>

</form>
<hr>
    <div class="form-group">
        <textarea class="form-control" rows="3" value="" id="finalString"></textarea>
    </div>
</div>
<script>
    var chartType = document.getElementsByName("chartType");
    var title = document.getElementById("title");
    var source = document.getElementById("source");
    var y_title = document.getElementById("y_title");
    var y_max = document.getElementById("y_max");
    var y_min = document.getElementById("y_min");
    var x_labels = document.getElementById("x_labels");
    var dataURL = document.getElementsByName("datalabel");
    var dataCAPTION = document.getElementsByName("dataCAPTION");


    function createInput(type, name, className=null){
        var input = document.createElement("input");
        input.type = type;
        input.name = name;
        input.class = className;
        return input
    }

    function createLabel(name, text, className=null){
        var label = document.createElement("label");
        label.for = name;
        label.class = className;
        label.innerHTML = text
        return label;
    }

    function addInput() {
        div = document.createElement("div")
        div.appendChild(createLabel("datalabel", "URL   :&nbsp;", "control-label"))
        div.appendChild(createInput("text","datalabel","dataLabel"))
        div.appendChild(createLabel("dataCAPTION", "&emsp;Caption:&nbsp;", "control-label"))
        div.appendChild(createInput("text","dataCAPTION","dataCAPTION"))
        div.classList.add("self-input")
        document.getElementById("inputArea").appendChild(div);
    }


    function findChartType() {
        if (chartType[0].checked == true) {
            document.getElementById("pieHidden").classList.add("hidden");
        }
        else {
            document.getElementById("pieHidden").classList.remove("hidden");
        }
    }

    function datastring() {
        var ds = "";
        for (i = 0; i < dataURL.length; i++){
            ds +=  '<li><a class="ns-img" alt="photo_' + i + '" href="' + dataURL[i].value + '"></a><div class="caption">' + dataCAPTION[i].value + '</div></li> ';
        }
        return ds;
    }


    function generateString() {

        if (chartType[0].checked == true) {
            document.getElementById("finalString").value = '<meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="style.css" rel="stylesheet" type="text/css" />' + '<script src="script.js"  type="text/javascript"></sc' + 'ript><div id="thingy"><div class="slider-inner"><ul>' + datastring() + '</ul></div></div>';
        }

        else if (chartType[2].checked == true) {
            document.getElementById("finalString").value = "<!--[linechart title=\"" + title.value + "\" source=\"" + source.value + "\" y_title=\"" + y_title.value + "\" y_max=" + y_max.value + " y_min=" + y_min.value + " x_labels=\"" + x_labels.value + "\" " + datastring() + "]-->";
        }
        else {
            document.getElementById("finalString").value = "Please select a chart type and complete the information for the chart.";
        }
    };
</script>

Any help would be really great. Thank you.




Aucun commentaire:

Enregistrer un commentaire