Question

所以，我正在学习Javascript并遇到了一个问题。我有一个功能，将添加一些框，当我点击“添加数据”，我可以多次点击这个，但我希望能够有一个名为“删除数据”的按钮，这将允许我删除最后一个我加入。

代码可以在这里找到。

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   :&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>

任何帮助都会非常棒。 谢谢。

Answer 1

您可以通过在javascript中添加这两个功能来创建按钮

function createButton(type, name, className, value){
    var input = document.createElement("input");
    input.type = type;
    input.name = name;
    input.class = className;
    input.value = value;
    input.addEventListener("click", removeData);
    return input
}



function removeData() {
  this.parentNode.parentNode.removeChild(this.parentNode);
}

然后将此行添加到function addInput() ---

div.appendChild(createButton("button","removeData","btn-disable",   
"RemoveData"))

以下是工作示例 -

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
<style>
    .hidden{display:none;}
    .self-input {
        padding: 5px;
    }
    .green 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 createButton(type, name, className, value, onclick){
        var input = document.createElement("input");
        input.type = type;
        input.name = name;
        input.class = className;
        input.value = value;
        input.addEventListener("click", removeData);
        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.appendChild(createButton("button","removeData","btn-disable", "RemoveData"))

        
        div.classList.add("self-input")
        document.getElementById("inputArea").appendChild(div);
    }
    function removeData() {
      this.parentNode.parentNode.removeChild(this.parentNode);
    }

    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>
  </html>

Answer 2

以下是删除最后添加的输入的代码。它还将检查以确保它没有尝试删除不存在的内容（检查列表中是否有用户输入）。

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 removeInput() {
  inputArea = document.getElementById("inputArea");
  if(inputArea.childNodes.length > 0){
    inputArea.removeChild(inputArea.childNodes[inputArea.childNodes.length-1]);
  }
}


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.";
  }
};

<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>
      <button type="button" class="btn btn-default" value="Remove data" onClick="removeInput()">Remove data <i class="fa fa-minus-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>

Answer 3

有很多方法可以做到这一点。

我的建议是：

http://codepen.io/rmagalhaess/pen/rjKjao

来源：

<!doctype html>
<html>
<body>

<div id="Fields">
    <div id="DIV_0"> Field_0: <input type="text"> </div>
</div>
<button onClick="AddField()"> Add Field </button>
<button onClick="DelField()"> Del Field </button>
<hr>
<div id="Last_Index"> 0 </div>

<script>
    function AddField()
    {
        var Last_Index = document.getElementById('Last_Index');

        var Add_Index = Number(Last_Index.innerHTML) + 1;

            Last_Index.innerHTML = Add_Index;       

        var New_Div           = document.createElement('div');
            New_Div.id        = 'DIV_'+Add_Index;       
            New_Div.innerHTML = 'Field_'+Add_Index+': ';

        var New_Input = document.createElement('input');

            New_Div.appendChild(New_Input);     

        var Fields = document.getElementById('Fields');     
            Fields.appendChild(New_Div);
    }

    function DelField()
    {
        var Last_Index = document.getElementById('Last_Index');         

        var Del_Index = Number(Last_Index.innerHTML);

        if ( Del_Index > 0 )
        {
                Last_Index.innerHTML = Del_Index - 1;

            var Last_Div = document.getElementById('DIV_'+Del_Index);
                Last_Div.innerHTML = '';

            var Fields = document.getElementById('Fields');
                Fields.removeChild(Last_Div);
        }
    }

</script>

</body>
</html>

Javascript - 删除最后添加的div？

3 个答案: