Question

我的代码知识非常有限，来自CodeHS和Codecademy，请耐心等待。

所以我想创建一个数字列表，可以在点击时删除。到目前为止，数字列表非常好，但是当我点击div框时，我仍然无法清除它们。

我知道JSFiddle，但我认为这是我能做的最好的事情： http://www.codecademy.com/rfabrega/codebits/xZ61aJ

<!DOCTYPE html>
<html>
<head> 
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>

<style>
    .divContainer {
        width: 35px;
        height: 25px;
        border: solid 1px #c0c0c0;  
        background-color: #e1e1e1;
        font-family: verdana;  
        color: #000;
        float: left;
    }

    .text {
        font-size: 15px;
        font-family: verdana;
        color: black;
        margin-top: 4px;
    }

</style>
</head>
<body>
<script type="text/javascript">
    for(var i = 1; i <= 639; i++){
        var divTag = document.createElement("div");
        divTag.id = i;
        divTag.className = "divContainer";
        document.body.appendChild(divTag);
        var pTg = document.createElement("p");
        pTg.setAttribute("align", "center");
        pTg.className = "text";
        pTg.innerHTML = (i);
        document.getElementById(i).appendChild(pTg);
    }
</script>
</body>
</html>

Answer 1

$(document).ready(function(){
    $('p').hide();
    $("body").on("click",".divContainer",function(){
        $(this).remove();
    });
});

Answer 2

你必须在点击时创建一个删除目标div标签的功能：所以在你的代码中，创建div元素之后。插入此：

divTag.onclick = function(){this.parentNode.removeChild(this)};

在点击时删除用JS制作的动态div

2 个答案: