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

在我的网站中，用户将选择一个图像，然后该图像将被插入到div标签中。我需要它，所以当用户单击插入到div中的图像时，它将从div中删除（删除或隐藏）。我试过了：HTML - JavaScript - 添加和删除/隐藏元素

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; 
}

来源

2016-07-09 Jordan

你的'updateCards'函数做什么？ – Rai

updateCards函数尚未执行任何操作。它应该删除一次卡在div中点击。 – Jordan

您可以通过id删除img。

而且修复与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'; 
    }

来源

2016-07-09 21:07:17 Rai

您的编辑版本的这个答案（当前）没有工作。我曾尝试过。你之前给出的答案是正确的。将图像添加到div中的div，通过其div ID移除图像。 – Jordan

更正上面的错误。这应该可以正常工作。 – Rai

您需要点击事件侦听器附加到应用到所有插入的图像类。聆听者触发的功能将适用于css.style.display = "none"至this

来源

2016-07-09 21:04:17

每当我尝试使用css.style.display =“none”;它总是给我错误： – Jordan

一个错误，说：未捕获TypeError：无法读取属性'样式'null – Jordan

首先，删除属性和它的值之间的所有空间（我的意思是无处不在你的代码），那就是：

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

测试和工作！

来源

2016-07-09 21:16:12 spirit

1.我的代码中的空格是为了我的可读性，它根本不影响代码。 2.你所说的“错误”实际上是一个传入的变量。我需要那里的价值。但是谢谢。 3. updateCards（cardName）是一个函数，但我没有将它包含在代码中，因为它没有任何内容，因为这就是为什么我问这个问题，知道该写些什么。 – Jordan

@Jordan，你的“可读性”真的很差*练习，我强烈建议你不要再使用它=）。 2.我说的不是变量'cardName'，而是**属性**和**值**。 'onclick' - 属性和它的值（在你的例子中'updateCards（'+ cardName +'）'）**必须用双引号括起来。 – spirit

被传入名为cardName的函数的变量在上述情况下变为img id，因此不需要用双引号括起来。如果我这样做，那么id将是cardName而不是cardName的值。 – Jordan

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

回答

相关问题