0
だから、私はJavascriptを学んでいて、問題に遭遇しました。私はいくつかのボックスを追加する機能があります。「データの追加」をクリックすると、これを何度もクリックすることができますが、最後の1つを削除できる「データの削除」ボタンがあります。追加されました。Javascript - 最後に追加したdivを削除しますか？
コードはここにあります。
http://codepen.io/whyhellobradley/pen/ggKLXa
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://use.fontawesome.com/2d96912e6f.js"></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 : ", "control-label"))
div.appendChild(createInput("text","datalabel","dataLabel"))
div.appendChild(createLabel("dataCAPTION", " Caption: ", "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>
すべてのヘルプは本当に素晴らしいことです。 ありがとうございます。
はありがとうございました。それは素晴らしいように見えます！ –
@BradleyDeanJonesこれがあなたの質問に答えた場合は、それを合格とマークするようにしてください。 – Joffutt4