如何使用JavaScript在页面上一次显示1个表单

Question

我正在创建包含用户通过表单创建的卡片的列表。

我在这里遇到的问题是我想在页面上一次只显示1个添加项目表单* （每个列表中不是1个表单，而是整个页面上有1个表单）。 因此，如果用户创建多个列表，然后通过单击添加卡按钮打开表单，然后单击另一个从页面上的另一个列表添加卡按钮，第一个表单应该消失，并且新表单应该出现在单击它的列表中。 现在，当我单击添加卡片按钮时，多个表单将显示在不同的列表中，尤其是每当我创建多个列表时。

所以基本上，每当点击添加卡片时 ，如果某个表单已经在其他地方打开，它将被关闭，并且在我单击“ 添加卡片”按钮的列表中将打开一个新表单。

我希望我的解释很有用。 代码示例如下所示。

这是[Codepen] [ https://codepen.io/Joanc/pen/MZjJvy] 1上代码的链接。
我们将不胜感激。

注意 ：我只想更改带有add add-item-form类的卡片表单而不是带有id add-list-form的列表表单 。 （灰色）列表很好，我唯一的问题是卡片。

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //} 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper --> 

Answer 1

之所以发生这种情况，是因为您在所有add-item-form元素上迭代for循环并添加这些样式。 您在addList()添加内联事件侦听器，并且您无法指定实际单击了哪些元素，因为您无法捕获事件。 我知道这听起来有多令人沮丧，但我建议我再试一次，但保持良好的做法。 我建议你尽可能少地使用innerHTML ，不要在JS中为HTML添加内联样式。 而是创建符合您的期望的类，如shown ， hidden ，设计样式并将它们添加到事件中。 也可以使用addEventListener而不是在HTML中添加onclick() 。 你真的很接近你想要的东西，但它在这种形式下相当混乱。

编辑：我能给你的最简单的解决方法就是这个，但还有很多工作要做：

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); //Declaring index var listIndex = 0 function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; //Increasing index listIndex++ document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } document.getElementsByClassName('') //toggle between links and 'add-list-form' function hideSHowForm(form, link, id){ // var getForm = document.getElementsByClassName("listContainer"); // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form)[id].style.display == 'block'){ document.getElementsByClassName(form)[id].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[id].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper --> 

Answer 2

只需在const list = document.createElement('div');上面添加这两行const list = document.createElement('div'); 你的addList()函数里面的行如下：

var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";

上面的操作是将list-wrapper div分配给名为listWrap的变量，然后每当有人试图提交新表单时，将list-wrapper div重置为空div。 在清空list-wrapper div之后，该函数继续添加提交给空list-wrapper div的新“add-item-form form”。

---

运行下面的代码片段 ，看看上面的两行是如何工作的：

 // *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } var listWrap = document.getElementById("list-wrapper"); listWrap.innerHTML = ""; const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">&#8230;</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //} 

 /*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ } 

 <div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;"> </div> </form> </div> </div><!-- end of board-wrapper -->