Question

在我的网站中，用户将选择一个图像，然后该图像将插入到div标签中。我需要它，所以当用户点击插入div的图像时，它将从div中删除（删除或隐藏）。我试过了：

document.getElementById("elementId").style.display = "none";

和其他类似的事情。我真的无法让这个工作，请帮助！

HTML + JavaScript代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script>
        var cardNumber = 1;
        var deck = [];

        var addCard = function(cardName)
        {   
            if("undefined" != document.getElementById("card" + cardNumber).value)
            {
                if(deck.indexOf(cardName) > -1)
                {

                }
                else
                {
                    if(deck.length != 1)
                    {
                        deck.push(cardName);
                        document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';
                        cardNumber += 1;
                    }
                    if(deck.length >= 1)
                    {
                        cardNumber = 1;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id = "card1" class = "cards"></div>
    <div id = "1">
        <img class = "cardSize" onclick = "addCard('Archer')" src = "Images/Cards/Archer.png">
    </div>
</body>

CSS代码：

.cards
{
    height:150px;
    width:125px;
    float:left;
    margin-left:6.2%;
    margin-bottom:30px;
    border:5px solid #ff6666;
    background-color:#ff6666;
}
.cardSize
{
    height:150px;
    width:125px;
    float:left;
    margin-left:7%;
    margin-top:30px;
}

Answer 1

您可以img删除id。

同时解决updateCards功能的问题：

document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = "updateCards(\'' + cardName + '\')" src = "' + cardName + '.png">';

例如，

 <div id="card1" class="cards">
    <img id="Archer" class="deckCardSize"    onclick="updateCards('Archer')" src="Archer.png">
 </div>

然后只需使用div删除id="Archer"：

document.getElementById("Archer").remove();

仅供参考，我添加了一个简单的updateCards函数，只隐藏img而不是完全删除它：

    var updateCards = function(cardName) {
        document.getElementById(cardName).style.display = 'none';
    }

Answer 2

您需要将click事件侦听器附加到应用于所有插入图像的类。然后，侦听器触发的函数将css.style.display = "none"应用于this

Answer 3

首先，删除属性及其值之间的所有空格（我的意思是代码中的所有位置），即：

<div id="card1" class="cards"></div><!-- correct -->
<div id = "card1" class = "cards"></div><!-- incorrect -->

其次，您的代码中有错误：

document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';

您错过了onclick值附近的双引号。替换为：

document.getElementById("card" + cardNumber).innerHTML = '<img id="' + cardName + '" class="deckCardSize" onclick="updateCards(' + cardName + ')" src="Images/Cards/' + cardName + '.png">';

此外，您必须定义函数updateCards(name)，它可能为空，但它必须存在。如果它不存在，则单击该图像后，任何javascript代码都将停止运行。

第三，<div id = "1">也有错误。 id属性必须从字母开始。

这是工作代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script>
        var cardNumber = 1;
        var deck = [];

        function addCard(cardName) {   
            if ("undefined" != document.getElementById("card" + cardNumber).value) {
                if (deck.indexOf(cardName) > -1) {

                } else {
                    if (deck.length != 1) {
                        deck.push(cardName);
                        document.getElementById("card" + cardNumber).innerHTML = '<img id="img' + cardName + '" class="deckCardSize" onclick="updateCards(\'' + cardName + '\')" src="Images/Cards/' + cardName + '.png">';
                        cardNumber += 1;
                    }
                    if (deck.length >= 1) {
                        cardNumber = 1;
                    }
                }
            }
        }
        function updateCards(cardName) {
            //some work
            document.getElementById("img" + cardName).remove();
        }
    </script>
</head>
<body>
    <div id="card1" class="cards"></div>
    <div id="main1">
        <img class="cardSize" onclick="addCard('Archer')" src="Images/Cards/Archer.png">
    </div>
</body>

经过测试和工作！

HTML - JavaScript - 添加和删除/隐藏元素

3 个答案: