Question

我正在研究这个项目，它应该做的是展示一系列包含某人名字及其形象的“名片”。当您将鼠标悬停在卡片上时，会出现一个x按钮并单击该按钮将从页面中删除该卡片。还有一个输入一个用于图像的URL，另一个输入用于人名，在这两个输入下是一个提交按钮，当它被提交时它应该创建卡。

现在我有了创建卡片的代码，但它似乎没有用。

    document.getElementById('btn').onclick = function() {
        var addPhoto = document.getElementById('imagename').value,
        src = addPhoto +'.png',
        img = document.createElement('img');
        img.src = src;

        var addName =document.getElementById('actorname').value;


    var card = document.createElement('div');
 card.setAttribute('class','card');

 var title = document.createElement('h1');
 container.innerHTML = addName;

var cardImage = document.createElement('div');
cardImage.setAttribute('class','card-image');

 var img = document.createElement('img');
image.setAttribute('src',addPhoto);

var button = document.createElement('input');
button.setAttribute('class','buttons');
button.setAttribute('type','image');
button.setAttribute('src','img/close.png');

card.appendChild(title);
card.appendChild(cardImage);
cardImage.appendChild(image);
cardImage.appendChild(button);
document.getElementById("lefty").appendChild(card);
};

Answer 1

要添加新卡，您应该从地面设置所有内容。您应该在将Javascript添加到页面之前在Javascript中创建以下内容：

<div class="card">
    <h1>the_name</h1>
    <div class="card-image">
        <img src="the_link"/>
        <input class="buttons" type="image" src = "img/close.png"/>
    </div>
</div>

您已经知道如何获取*'the_name'*和*'the_link'*（卡片的变量）。我将在我的解决方案中使用这些变量。首先，你必须创建所有元素。

var card = document.createElement('div');
card.setAttribute('class','card');

var title = document.createElement('h1');
container.innerHTML = the_name;

var cardImage = document.createElement('div');
cardImage.setAttribute('class','card-image');

var image = document.createElement('img');
image.setAttribute('src',the_link);

var button = document.createElement('input');
button.setAttribute('class','buttons');
button.setAttribute('type','image');
button.setAttribute('src','img/close.png');

现在您要将所有元素粘贴到网页上。首先将元素相互附加，然后将它们附加到您想要的位置（在您的情况下是正文）。

card.appendChild(title);
card.appendChild(cardImage);
cardImage.appendChild(image);
cardImage.appendChild(button);

document.body.appendChild(card);

Answer 2

你有基本的想法，你只需要再走几步。对于删除，您需要为每张卡添加一个ID，然后使用该ID调用JS函数：

<div class="card" id="william">
    <h1>William Finley (Phantom of the Paradise)</h1>
    <div class="card-image">
      <img src="img/avatars/william.png"/>
      <input class="buttons" type="image" src = "img/close.png" onclick="removeCard('william')"/>
    </div>
</div>

<script type="text/javascript">
  var removeCard = function(cardId) {
    var cardElement = document.getElementById(cardId);
    cardElement.parentNode.removeChild(cardElement);
  } 
</script>

当你创建一张卡片时（Nicky解释得很好），请确保将ID和onclick事件添加到元素生成中。

Answer 3

您可以使用javascript以奇怪的方式删除元素。首先，你必须得到你想要摆脱的元素的domNode。例如，两个节点之一：

var unwanted = document.getElementsByTagName('a')[0];
var unwanted = document.getElementById('id_of_unwanted_item');

然后你必须执行以下功能：

unwanted.parentNode.removeChild(unwanted)

添加/删除按钮

3 个答案: