Question

这是我表格的一部分。我添加了两个按钮：添加和删除。当我单击“添加”按钮时，我想添加两个输入，它们具有不同的样式。此外，当我单击“删除”按钮时，将删除最后一对输入（活动时间和内容）。我怎么能实现这些效果（我知道应该用onclick事件来实现）？谢谢！

        <div class="pure-g" id="activity">

                <div class="pure-u-1 pure-u-sm-3-24 l-box" >
                    <input id="activityTime"  type="time" required>
                </div>
                <div class="pure-u-1 pure-u-sm-9-24 l-box" >
                    <textarea id="actContent" class="pure-u-23-24" rows="5" required></textarea>
                </div>



        </div>

        <input id="btn-remove" class="pure-button pure-button-primary pure-btn-right" type="button" value="Remove">
        <input id="btn-add" class="pure-button pure-button-primary pure-btn-right" type="button" value="Add">

更新我尝试了下面的两个解决方案，他们略有问题。所以我使用了jQuery。这是代码。

$(document).ready(function(){
$('#btn-add').click(function(){
    $('#activity').append('<div class="pure-u-1 pure-u-sm-3-24 l-box" >'+
        '<input id="activityTime"  type="time" required>'+
        '</div>'+
        '<div class="pure-u-1 pure-u-sm-9-24 l-box" >'+
        '<textarea id="actContent" class="pure-u-23-24" rows="5" required>'+
        '</textarea>'+
        '</div>'+
        '</div>');
});
$('#btn-remove').click(function(){
    var count=$('#activity').children().length;
    if(count>4){
        $("#activity > div").slice(-2).remove();
    }

});
});

Answer 1

只需将输入对放入某个类的div（＆＃34; pair＆＃34; here）

var input='<div class="pair"><div class="pure-u-1 pure-u-sm-3-24 l-box" ><input id="activityTime"  type="time" required></div><div class="pure-u-1 pure-u-sm-9-24 l-box" ><textarea id="actContent" class="pure-u-23-24" rows="5" required></textarea></div></div>';

然后将add()添加到添加按钮，将rem()添加到删除按钮

var activity = document.getElementById("activity");

function add() {
    activity.innerHTML+= input;
}

function rem() {
    var pairs = activity.getElementsByClassName("pair");
    var len = pairs.length;
    if(len>0) activity.removeChild(pairs[len-1]);
}

请参阅the fiddle。

Answer 2

1）在添加/删除输入中添加ID，您需要在HTML中触摸其他内容：

<input id="remove" class="..." type="button" value="Remove">
<input id="add" class="..." type="button" value="Add">

2）这是JavaScript：

var activity = document.getElementById("activity"),
    add = document.getElementById("add"),
    remove = document.getElementById("remove");

add.onclick = function() {
    var newTime = document.createElement("div"),
        newTimeIn = document.createElement("input"),
        newActivity = document.createElement("div"),
        newActivityIn = document.createElement("textarea");
    newTime.class = "pure-u-1 pure-u-sm-3-24 l-box";
    newTimeIn.type = "time";
    newTimeIn.required = "required";
    newTime.appendChild(newTimeIn);
    activity.appendChild(newTime);
    newActivity.class = "pure-u-1 pure-u-sm-9-24 l-box";
    newActivityIn.class = "pure-u-23-24";
    newActivityIn.rows = "5";
    newActivityIn.required = "required";
    newActivity.appendChild(newActivityIn);
    activity.appendChild(newActivity);
}
    
remove.onclick = function() {
    activity.removeChild(activity.lastElementChild);
    activity.removeChild(activity.lastElementChild);
}

<div class="pure-g" id="activity">
  <div class="pure-u-1 pure-u-sm-3-24 l-box" >
    <input id="activityTime" type="time" required>
  </div>
  <div class="pure-u-1 pure-u-sm-9-24 l-box" >
    <textarea id="actContent" class="pure-u-23-24" rows="5" required></textarea>
  </div>
</div>
<input id="remove" class="pure-button pure-button-primary pure-btn-right" type="button" value="Remove">
<input id="add" class="pure-button pure-button-primary pure-btn-right" type="button" value="Add">

javascript - 添加和删除项目

2 个答案: