Question

以下代码允许我将新内容附加到div“用户”。但是，如果用户单击按钮，我希望能够删除附加的内容。

当前代码在单击时仅删除“删除”按钮。但是，我需要在附加代码的开头删除带有“ removeuser”类的整个附加代码。

任何帮助将不胜感激！

<div id="users"></div>

<script>

function adduser() {

count += 1;

$('#users').append('<div id="field'+ count +'"  class="removeuser[]"><div 
id="left"><div id="fieldname">user #'+ count +' Name:</div><div 
id="field"><input id="user_name'+ count +'" name="user_name[]"' + '" 
type="text" /></input></div><div id="clear"></div></div><div id="leftleft"> 
<div id="fieldname">user #'+ count +' Age</div><div id="field"><input 
type="number" id="user_age'+ count +'" name="user_age[]" 
style="width:50px;" min="0"></input></div><div id="clear"></div><br></div> 
<div id="leftleft"><a href="javascript: void(0)" onclick="adduser(); return 
false;"><div id="field" class="add"><div 
style="position:relative;left:-4px;top:1px;">add another user +</div></div> 
</a><br></div> <div id="leftleft"><a href="javascript: void(0)" 
onclick="$(this).remove();" ><div id="deluser[]" class="add"><div 
style="position:relative;left:-4px;top:1px;">-</div></div></a><br></div> 
<div id="clear"></div></div>');


var no = document.getElementById("deluser");

no.onclick = function(){


$('#users .removeuser').$(this).remove();

};

</script>

Answer 1

使用类似的东西

$( '#users' ).empty();

Answer 2

您需要使用以下代码

var no = $(".deluser"); // add class 'deluser' to each div

no.onclick = function(){
    $('#users').empty();
};

Answer 3

据我所知，这可能是您正在寻找的解决方案（注意，并非所有浏览器都支持。请参见下面的编译版本） ...

var count = 0;
adduser();

function adduser() {
    $('#users').append(newUser(count))
    count++;
}

function deluser(e) {
    $(e.target).closest('.user-container').remove();
}

function newUser(count) {
     var deleteButton = `
        <div>
            <a href="javascript: void(0)" onclick="deluser(event); return false;">
                <div class="add delete-user" data>
                    <div style="position:relative;left:-4px;top:1px;">-</div>
                </div>
            </a>
            <br>
        </div>
     `;
     return `
        <div class="user-container">
            <div id="left">
                <div class="fieldname">
                    user #${count} Name:
                </div>
                <div class="field">
                    <input id="user_name${count}" name="user_name[]" type="text" /></input>
                </div>
                <div id="clear"></div>
            </div>
            <div>
                <div class="fieldname">
                    user #${count} Age
                </div>
                <div class="field">
                    <input type="number" id="user_age${count}" name="user_age[]" style="width:50px;" min="0"></input>
                </div>
                <div id="clear"></div><br>
            </div>
            <div>
                <a href="javascript: void(0)" onclick="adduser(); return false;">
                    <div class="field" class="add">
                        <div style="position:relative;left:-4px;top:1px;">add another user +</div>
                    </div> 
                </a>
                <br>
            </div> 
            ${count > 0 ? deleteButton : ""}
            <div class="clear">
            </div>
        </div>
    `;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="users"></div>

尽管您的初次尝试有很多地方出了问题，但我并不表示无礼，但是您可能应该做更多的工作来学习HTML，JS和jQuery的基础知识。 Treehouse是我很多年前开始的地方，并认为它是Web开发（Treehouse - front-end web development）的出色入门。话虽这么说是最明显的问题...

唯一的id s
- id属性必须唯一。与之类似，具有id="leftleft"然后在同一文档中具有id="leftleft"的另一个元素上是无效的。
缺少功能块}的右括号
HTML模板字符串
- 老实说，我不知道您如何读取HTML模板字符串，但这是React和Angular之类的前端框架要解决的问题之一。编写这样的HTML模板肯定会引入错误，还会使您发疯。
- 建议您使用Template Literals并使用Webpack + babel来transpile来实现浏览器支持，而不是用React或Angular重写整个程序，或者现在访问{{3 }}，然后手动插入JS（带有模板文字），然后替换为输出代码。

这是通过Babel编译代码后的外观，所有浏览器都支持该代码。

var count = 0;
adduser();

function adduser() {
  $('#users').append(newUser(count));
  count++;
}

function deluser(e) {
  $(e.target).closest('.user-container').remove();
}

function newUser(count) {
  var deleteButton = "\n            <div>\n                <a href=\"javascript: void(0)\" onclick=\"deluser(event); return false;\">\n                    <div class=\"add delete-user\" data>\n                        <div style=\"position:relative;left:-4px;top:1px;\">-</div>\n                    </div>\n                </a>\n                <br>\n            </div>\n         ";
  return "\n            <div class=\"user-container\">\n                <div id=\"left\">\n                    <div class=\"fieldname\">\n                        user #".concat(count, " Name:\n                    </div>\n                    <div class=\"field\">\n                        <input id=\"user_name").concat(count, "\" name=\"user_name[]\" type=\"text\" /></input>\n                    </div>\n                    <div id=\"clear\"></div>\n                </div>\n                <div>\n                    <div class=\"fieldname\">\n                        user #").concat(count, " Age\n                    </div>\n                    <div class=\"field\">\n                        <input type=\"number\" id=\"user_age").concat(count, "\" name=\"user_age[]\" style=\"width:50px;\" min=\"0\"></input>\n                    </div>\n                    <div id=\"clear\"></div><br>\n                </div>\n                <div>\n                    <a href=\"javascript: void(0)\" onclick=\"adduser(); return false;\">\n                        <div class=\"field\" class=\"add\">\n                            <div style=\"position:relative;left:-4px;top:1px;\">add another user +</div>\n                        </div> \n                    </a>\n                    <br>\n                </div> \n                ").concat(count > 0 ? deleteButton : "", "\n                <div class=\"clear\">\n                </div>\n            </div>\n        ");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="users"></div>

Answer 4

我试图用另一种方式说明您的方法，希望对您有所帮助。

var count = 0;
function addUser(i) {
  var userBloc = '<li class="list-group-item" id="user'+i+'"> I am the user'+ i +
                  ' <br><button class="btn btn-danger remove" data-count="'+i+'">Remove me</button><hr></li>';
     return userBloc;             
}

$('#add').click(function(){
  $('#blocs').append(addUser(count));
  $('#user'+count).fadeIn(activeRemove); //important to active remove event
  count++;
});

function activeRemove(){
  $.each($('button.remove'), function(i,item){
    $(item).click(function(){
        $('#user'+$(item).attr('data-count')).remove();
    });

});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blocs" class="list-group"></div>
  <button id="add">Add a another user</button>

单击按钮将内容附加到HTML并删除附加的内容

4 个答案: