Нужна помощь в списке дел - Javascript

Список дел JavaScript

Мне нужен его код.

Когда вы щелкнете по списку из «Нового списка», вы увидите новый список в «Готовом» списке. Мне не нужен «x» после текста в списке «Готово». Я хочу добавить входное значение и удалить входное значение в массиве (var A), когда я закрываю список из «Нового списка». Как это сделать и где разместить код?

*{margin:0; padding:0;}

#Header{
        padding:50px;
		background-color:black;
		color:white;
	   }
	   
#myInput{
         padding:20px;
		 width:300px;
		 height:auto;
		 background-color:black;
		 color:white;
		 border:2px solid white;
		 outline:none;
		}
		
#Add{
     padding:18.5px;
	 background-color:black;
	 color:white;
	 border:2px solid white;
	 outline:none;
	 margin-left:;
	 margin-top:;
	 position:absolute;
	 cursor:pointer;
	}

#NL{
    padding:20px;
	font-family:verdana;
	font-size:12pt;
   }
   
#NL2{
     position:absolute;
	 left:400px;
	 top:160px;
	 padding:20px;
	 font-family:verdana;
	 font-size:12pt;
    }
	
#myUL{
      list-style-type:none;
	  margin:0;
	  padding:0;
	  width:400px;
	  display:flex;
	  flex-direction:column;
	  position:absolute;
	 }
	 
#myUL li{
       padding:20px 20px 10px 20px;
	   background-color:black;
	   color:white;
	   border:1px solid white;
	   opacity:0.9;
	   cursor:pointer;
	   transition:0.3s ease-in;
	  }
	  
#myUL li:nth-child(odd){
                      background-color:black;
					  color:white;
					  opacity:0.8;
					 }
					 
#myUL li:nth-child(even){
                      background-color:black;
					  color:white;
					  opacity:1;
					 }					 
					 
#myUL li.checked{
               text-decoration:line-through;
			   opacity:0.4;
               transition:0.3s ease-in-out;			   
			  }
			  
#myUL  li.checked:before{
                       content:"";
                       width:20px;
                       height:10px;
                       border-left:5px solid white;		
                       border-bottom:5px solid white;
                       position:absolute;		
                       transform:rotate(-45deg);					   
					  }
   
.sp{
    margin-left:0px;
   }
   
.checked .sp{
            margin-left:50px;
		   }
		   
#myUL .close{
            float:right;
	        padding:10px;
	        margin-top:-10px;
	        margin-right:-10px;
	        background-color:white;
	        color:black;
	        opacity:1;
	        cursor:pointer;
	       }
	  
#myUL .close:hover{
                  background-color:#2196f3;
			      color:white;
			      opacity:1;
			     }
			
#myUL2{
	   list-style-type:none;
	   margin-left:400px;
	   margin-top:0px;
	   padding:0;
	   width:400px;
	   display:flex;
	   flex-direction:column;
	   position:absolute;
	  }
	  

	 
#myUL2 li{
		padding:20px;
	    background-color:black;
	    color:white;
	    border:1px solid white;
	    opacity:0.9;
	    cursor:pointer;
	    transition:0.4s;
	   }
	  
#myUL2 li:nth-child(odd){
                       background-color:black;
					   color:white;
					   opacity:0.8;
					  }
					 
#myUL2 li:nth-child(even){
                       background-color:black;
					   color:white;
					   opacity:1;
					  }

#myUL2 li{
        text-decoration:line-through;
		opacity:0.4;
        transition:0.3s ease-in-out;			   
	   }
			  
#myUL2  li:before{
                content:"";
                width:20px;
                height:10px;
                border-left:5px solid white;		
                border-bottom:5px solid white;
                position:absolute;		
                transform:rotate(-45deg);					   
			   }
					  
.sp2{
     margin-left:50px;
    }
	
#myUL2 .close2{
              display:none;
			 }
			 
#EText{
       margin-left:60%;
	  }
<!DOCTYPE html>

<html>

<link rel = "stylesheet" type = "text/css" href = "style.css"/>

<script src = "jquery.min.js"></script>

<body>

<div id = "Header">

<input type = "text" placeholder = " Type your text" id = "myInput"/>

<span id = "Add" onclick = "newElement()">Add</span>

</div>

<div id = "NL">New List</div>

<ul id = "myUL">

<li><span class = "sp">ASQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASadQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASffffQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASQgeryyyyyyym<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASQgvvvvvm<span class = "close">&times;</span></span></li>

</ul>

<div id = "NL2">Done</div>

<ul id = "myUL2">

<li><span class = "sp2">ASQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASadQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASffffQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASQgeryyyyyyym<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASQgvvvvvm<span class = "close2">&times;</span></span></li>

</ul>

<p id = "EText"></p>

<script>
var input=document.getElementById("myInput");

var A=[];

var i;

var ul=document.getElementById("myUL");

var list=ul.getElementsByTagName("li");

var ul2=document.getElementById("myUL");

var list2=ul2.getElementsByTagName("li");

var etext=document.getElementById("EText");

var sp=document.getElementsByClassName("sp");

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display = "none";

}

}


ul.addEventListener("click", function(n){

if (n.target.tagName= = "LI"){

n.target.classList.toggle("checked");

}



}, false);





function newElement(){

var inputvalue=document.getElementById("myInput").value;

var i;

var createli=document.createElement("li");

var span=document.createElement("span");

span.className = "sp";

var span2=document.createElement("span");

span2.className = "close";

var closetext=document.createTextNode("\u00D7");

var txt=document.createTextNode(inputvalue);

if (inputvalue= = ""){
alert("Write something.");
}
else{

if (A.indexOf(inputvalue)>-1){
etext.innerHTML = "Already exists";
}
else{

var addlist = {

a: ul.appendChild(createli),
b: createli.appendChild(span),
c: span.appendChild(txt),
d: span.appendChild(span2),
e: span2.appendChild(closetext)

}

A.push(inputvalue);

etext.innerHTML = "";

}




}

input.value = "";

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display = "none";

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("span");

dspan.className = "sp2";

this.style.display = "none";

var addlist2 = {

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}

}

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("SPAN");

dspan.className = "sp2";

this.style.display = "none";

var addlist2 = {

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}

}

}
</script>

</body>

</html>
javascript html css
14.08.2018 06:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
99
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I don't want the "x" after texts in "Done list"

#myUL2 span.close {
  display: none;
}

Для обновления массива проверьте это

var input=document.getElementById("myInput");

var A=[];

var i;

var ul=document.getElementById("myUL");

var list=ul.getElementsByTagName("li");

var ul2=document.getElementById("myUL");

var list2=ul2.getElementsByTagName("li");

var etext=document.getElementById("EText");

var sp=document.getElementsByClassName("sp");

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display = "none";

}

}


ul.addEventListener("click", function(n){

if (n.target.tagName= = "LI"){

n.target.classList.toggle("checked");

}



}, false);





function newElement(){

var inputvalue=document.getElementById("myInput").value;

var i;

var createli=document.createElement("li");

var span=document.createElement("span");

span.className = "sp";

var span2=document.createElement("span");

span2.className = "close";

var closetext=document.createTextNode("\u00D7");

var txt=document.createTextNode(inputvalue);

if (inputvalue= = ""){
alert("Write something.");
}
else{

if (A.indexOf(inputvalue)>-1){
etext.innerHTML = "Already exists";
}
else{

var addlist = {

a: ul.appendChild(createli),
b: createli.appendChild(span),
c: span.appendChild(txt),
d: createli.appendChild(span2),
e: span2.appendChild(closetext)

}

A.push(inputvalue);

etext.innerHTML = "";

}




}

input.value = "";

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display = "none";

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("span");

dspan.className = "sp2";

this.style.display = "none";

var addlist2 = {

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}
console.info(A);
// remove from array
var index = A.indexOf(this.querySelector(".sp").innerHTML);
if (index > -1) {
  A.splice(index, 1);
}
console.info(A);

}

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){
console.info(A);
var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("SPAN");

dspan.className = "sp2";

this.style.display = "none";

var addlist2 = {

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}
}

}
*{margin:0; padding:0;}

#Header{
        padding:50px;
		background-color:black;
		color:white;
	   }
	   
#myInput{
         padding:20px;
		 width:300px;
		 height:auto;
		 background-color:black;
		 color:white;
		 border:2px solid white;
		 outline:none;
		}
		
#Add{
     padding:18.5px;
	 background-color:black;
	 color:white;
	 border:2px solid white;
	 outline:none;
	 margin-left:;
	 margin-top:;
	 position:absolute;
	 cursor:pointer;
	}

#NL{
    padding:20px;
	font-family:verdana;
	font-size:12pt;
   }
   
#NL2{
     position:absolute;
	 left:400px;
	 top:160px;
	 padding:20px;
	 font-family:verdana;
	 font-size:12pt;
    }
	
#myUL{
      list-style-type:none;
	  margin:0;
	  padding:0;
	  width:400px;
	  display:flex;
	  flex-direction:column;
	  position:absolute;
	 }
	 
#myUL li{
       padding:20px 20px 10px 20px;
	   background-color:black;
	   color:white;
	   border:1px solid white;
	   opacity:0.9;
	   cursor:pointer;
	   transition:0.3s ease-in;
	  }
	  
#myUL li:nth-child(odd){
                      background-color:black;
					  color:white;
					  opacity:0.8;
					 }
					 
#myUL li:nth-child(even){
                      background-color:black;
					  color:white;
					  opacity:1;
					 }					 
					 
#myUL li.checked{
               text-decoration:line-through;
			   opacity:0.4;
               transition:0.3s ease-in-out;			   
			  }
			  
#myUL  li.checked:before{
                       content:"";
                       width:20px;
                       height:10px;
                       border-left:5px solid white;		
                       border-bottom:5px solid white;
                       position:absolute;		
                       transform:rotate(-45deg);					   
					  }
   
.sp{
    margin-left:0px;
   }
   
.checked .sp{
            margin-left:50px;
		   }
		   
#myUL .close{
            float:right;
	        padding:10px;
	        margin-top:-10px;
	        margin-right:-10px;
	        background-color:white;
	        color:black;
	        opacity:1;
	        cursor:pointer;
	       }
	  
#myUL .close:hover{
                  background-color:#2196f3;
			      color:white;
			      opacity:1;
			     }
			
#myUL2{
	   list-style-type:none;
	   margin-left:400px;
	   margin-top:0px;
	   padding:0;
	   width:400px;
	   display:flex;
	   flex-direction:column;
	   position:absolute;
	  }
	  

	 
#myUL2 li{
		padding:20px;
	    background-color:black;
	    color:white;
	    border:1px solid white;
	    opacity:0.9;
	    cursor:pointer;
	    transition:0.4s;
	   }
	  
#myUL2 li:nth-child(odd){
                       background-color:black;
					   color:white;
					   opacity:0.8;
					  }
					 
#myUL2 li:nth-child(even){
                       background-color:black;
					   color:white;
					   opacity:1;
					  }

#myUL2 li{
        text-decoration:line-through;
		opacity:0.4;
        transition:0.3s ease-in-out;			   
	   }
			  
#myUL2  li:before{
                content:"";
                width:20px;
                height:10px;
                border-left:5px solid white;		
                border-bottom:5px solid white;
                position:absolute;		
                transform:rotate(-45deg);					   
			   }
					  
.sp2{
     margin-left:50px;
    }
	
#myUL2 .close2{
              display:none;
			 }
			 
#EText{
       margin-left:60%;
	  }
<!DOCTYPE html>

<html>

<link rel = "stylesheet" type = "text/css" href = "style.css"/>

<script src = "jquery.min.js"></script>

<body>

<div id = "Header">

<input type = "text" placeholder = " Type your text" id = "myInput"/>

<span id = "Add" onclick = "newElement()">Add</span>

</div>

<div id = "NL">New List</div>

<ul id = "myUL">

<li><span class = "sp">ASQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASadQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASffffQm<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASQgeryyyyyyym<span class = "close">&times;</span></span></li>
<li><span class = "sp">ASQgvvvvvm<span class = "close">&times;</span></span></li>

</ul>

<div id = "NL2">Done</div>

<ul id = "myUL2">

<li><span class = "sp2">ASQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASadQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASffffQm<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASQgeryyyyyyym<span class = "close2">&times;</span></span></li>
<li><span class = "sp2">ASQgvvvvvm<span class = "close2">&times;</span></span></li>

</ul>

<p id = "EText"></p>

</body>

</html>

Я внес эти изменения

d: createli.appendChild(span2),

this.parentElement.style.display = "none";

console.info(A);
// remove from array
var index = A.indexOf(this.querySelector(".sp").innerHTML);
if (index > -1) {
  A.splice(index, 1);
}
console.info(A);

Как насчет добавления и удаления входного значения из массива (var A) при закрытии списка из «Нового списка»?

— AL-RAHAT 14.08.2018 06:36
14.08.2018 06:27

Другие вопросы по теме

Организация параллельной работы 2 Div
В чем разница между использованием функции onclick напрямую и закрытием в цикле for
Странное поведение прямой и обратной косой черты в html
Есть ли способ извлечь идентификатор из "getElementsByClassName ('data')"?
Как установить текстовое поле на eval () в javascript
Куда вернуться после неудачного платежа в PayPal
Пользовательская настройка moveAll / removeAll icons
Загружается только один тег javascript?
JQuery устанавливает минимальное и максимальное значение для номера телефона с проверкой
Как использовать: перед добавлением фиксированного с помощью div с гибкой рамкой под вертикально по центру

Похожие вопросы

В чем разница между использованием функции onclick напрямую и закрытием в цикле for
Могу ли я использовать компонент внутри другого компонента в Angular?
JQuery - езда на велосипеде внутри класса
Неожиданный идентификатор RegExp Javascript IE
Будет ли цепочка методов создавать промежуточную переменную в стеке?
Создание функции, возвращающей отсортированные массивы?
Добавление суммы переменной к самой себе
Как сделать кривые ссылки и добавить всплывающую подсказку к ссылкам одновременно?
Войти и зарегистрироваться через ajax безопасно или нет?
Отображение 2 наборов случайных чисел после обратного отсчета