어떻게 자바 스크립트 만 사용하여 입력 디스플레이에 삭제 버튼을 추가 할 수 있습니까?

자, 질문을하기 전에, 나는이 답변을 찾기 위해 높거나 낮게 검색했고, 끝나지 않은 답변이나 jQuery 답변 만 제시했습니다. JAVASCRIPT 만 사용하여이 작업을 수행하려고합니다. 다른 라이브러리가 없습니다.어떻게 자바 스크립트 만 사용하여 입력 디스플레이에 삭제 버튼을 추가 할 수 있습니까?

나는 올바른 길을 가고 있다는 것을 알고 있지만, div 내에서 만든 입력의 마지막 항목 만 삭제하는 방법을 알아낼 수 없습니다 (모두 j를 사용). 그래서 삭제 버튼을 사용하여 첨부 된 입력 항목 만 실제로 삭제합니까?

나는 내 스크립트를 jsbin에 넣었습니다. 도움이 될 것입니다. 미리 감사드립니다. (:

나는 그것이 여기 그래서 어쨌든 여기에 내 코드를 추가하기로 것 같아 :

<!DOCTYPE html> 
<html> 
<body> 

Name: <input type="text" id="myText" value=""> 
<br/> 
<br/> 
Age: <input type="number" name="age"> 

<button onclick="myFunction()">Try it</button> 

<script> 

function myFunction() { 
    var input = document.getElementsByTagName('input')[0].value; 
    var agenum = document.getElementsByTagName('input')[1].value; 
    var div = document.createElement('div'); 
    div.style.border = '2px solid red'; 
    div.style.padding = '10px'; 
    div.style.display = 'block'; 
    document.body.appendChild(div); 
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum; 
    div.innerHTML = output; 
    deleteButton(div); 
} 

function deleteButton(x) { 
    var del = document.createElement('button'); 
    del.style.textDecoration = 'none'; 
    del.innerHTML = 'Remove this person?'; 
    del.style.color = 'white'; 
    del.style.backgroundColor = 'blue'; 
    document.body.appendChild(del); 
} 


</script> 

</body> 
</html>

출처

2017-04-19 mynameislink

두 가지 옵션이 있습니다. DIV를 매개 변수 x로 deleteButton()에 전달하고 있습니다. x div에 단추를 넣어 부모 div를 삭제할 수 있습니다. 또는 삭제 단추에 x에 대한 참조를 저장하여 삭제에 사용할 수있게하십시오. –

@NawedKhan 오케이 좋아, 대신 deleteButton (x) 함수를 사용하는 대신 myFunction에 삭제 단추 정보를 추가해야합니까? – mynameislink

@NawedKhan 입력 자체를 삭제하는 방법을 여전히 이해할 수 없습니다. 그게 내가 뭘 쓸거야? .remove 또는 무엇인가? – mynameislink

당신은 사업부 자체를 제거하는 방법을 알고 해달라고 무엇을, 당신은 당신의 deleteButton에 전달해야 기능을 삭제 removeChild를 사용합니다. 삭제 버튼 자체와 마찬가지로, this는. 여기 키워드입니다

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
Name: <input type="text" id="myText" value=""> 
 
<br/> 
 
<br/> 
 
Age: <input type="number" name="age"> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 

 
function myFunction() { 
 
    
 
    var input = document.getElementsByTagName('input')[0].value; 
 
    var agenum = document.getElementsByTagName('input')[1].value; 
 
    var div = document.createElement('div'); 
 
    div.style.border = '2px solid red'; 
 
    div.style.padding = '10px'; 
 
    div.style.display = 'block'; 
 
    document.body.appendChild(div); 
 
    
 
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum; 
 
    div.innerHTML = output; 
 
    
 
    //create your delete button after you click try it 
 
    var del = document.createElement('button'); 
 
    del.style.textDecoration = 'none'; 
 
    del.innerHTML = 'Remove this person?'; 
 
    del.style.color = 'white'; 
 
    del.style.backgroundColor = 'blue'; 
 
    //assign a function for it when clicked 
 
    del.onclick = function() { deleteButton(div,this)}; 
 
    document.body.appendChild(del); 
 
    <!-- deleteButton(div); --> 
 
} 
 

 
function deleteButton(x,y) { 
 
\t 
 
    var parent = document.getElementsByTagName("BODY")[0]; 
 
    //remove the div 
 
    parent.removeChild(x); 
 
    //remore the button 
 
    parent.removeChild(y); 
 
    
 
} 
 

 

 
</script> 
 

 
</body> 
 
</html>

출처

2017-04-19 23:26:51

정말 고마워요. 정확히 .removeChild()를 사용하여 삭제하는 방법을 알아 내려고했는데, 다시 한번 감사드립니다. (: – mynameislink

걱정하지 않으셔도됩니다. 답변을 수락 한 것으로 표시해주세요.) Thanks : –

당신은 궤도에 확실히입니다. 목 할 수있는 전자 쉬운 일이 당신은 또한 당신이 비록 삭제 버튼을 확인 할 수 있습니다 이벤트 핸들러

del.addEventListener('click', function(){ x.parentNode.removeChild(x); })

을 추가하는 것입니다,하지만 난 당신이 그 그림이 밖으로 얻을 수 있습니다 확신 해요. jQuery를 바닐라 JS로 변환하는 데 유용한 리소스도 여기 http://youmightnotneedjquery.com/

출처

2017-04-19 23:28:24

Hey thanks man! 나는 확실히 jQuery를 사랑하는 그 사이트를 체크 아웃 할 것이지만 나는 당신이 알고있는 바닐라와 얼마나 잘할 수 있는지보기 위해 노력하고 있는가? 고맙습니다! – mynameislink

어떻게 자바 스크립트 만 사용하여 입력 디스플레이에 삭제 버튼을 추가 할 수 있습니까?

답변

관련 문제