जावास्क्रिप्ट

Question

का उपयोग कर एचटीएमएल के अंदर HTML को जोड़ें/हटाएं मैं एक div में कई पंक्तियां जोड़ने और उन्हें हटाने में सक्षम होना चाहता हूं। मेरे पास पृष्ठ के शीर्ष पर एक '+' बटन है जो सामग्री जोड़ने के लिए है। फिर प्रत्येक पंक्ति के दाईं ओर एक '-' बटन होता है जो उस पंक्ति को हटाने के लिए होता है। मैं इस उदाहरण में जावास्क्रिप्ट कोड नहीं समझ सकता।

यह मेरा मूल HTML संरचना होती है:

<input type="button" value="+" onclick="addRow()"> 

<div id="content"> 

</div> 

यह वह जगह है कि मैं क्या सामग्री div अंदर जोड़ना चाहते हैं:

<input type="text" name="name" value="" /> 
<input type="text" name="value" value="" /> 
<label><input type="checkbox" name="check" value="1" />Checked?</label> 
<input type="button" value="-" onclick="removeRow()"> 

Answer 1

आप ऐसा कुछ कर सकते हैं।

function addRow() { 
    var div = document.createElement('div'); 

    div.className = 'row'; 

    div.innerHTML = 
     '<input type="text" name="name" value="" />\ 
     <input type="text" name="value" value="" />\ 
     <label> <input type="checkbox" name="check" value="1" /> Checked? </label>\ 
     <input type="button" value="-" onclick="removeRow(this)">'; 

    document.getElementById('content').appendChild(div); 
} 

function removeRow(input) { 
    document.getElementById('content').removeChild(input.parentNode); 
} 

Answer 2

एक वर्ग है कि बटन के लिए कहते हैं की सुविधा देता है कि:

`<input type="button" value="+" class="b1" onclick="addRow()">` 

आपके जेएस इस तरह दिखना चाहिए:

$(document).ready(function(){ 
    $('.b1').click(function(){ 
     $('div').append('<input type="text"..etc '); 
    }); 
}); 

Answer 3

आप इस कार्य का उपयोग किसी बच्चे को डीओएम तत्व में जोड़ने के लिए कर सकते हैं।

function addElement(parentId, elementTag, elementId, html) 

{ 


// Adds an element to the document 


    var p = document.getElementById(parentId); 
    var newElement = document.createElement(elementTag); 
    newElement.setAttribute('id', elementId); 
    newElement.innerHTML = html; 
    p.appendChild(newElement); 
} 



function removeElement(elementId) 

{ 

    // Removes an element from the document 
    var element = document.getElementById(elementId); 
    element.parentNode.removeChild(element); 
} 

Answer 4

function addRow() 
    { 
     var e1 = document.createElement("input"); 
     e1.type = "text"; 
     e1.name = "name1"; 

     var cont = document.getElementById("content") 
     cont.appendChild(e1); 

    } 

Answer 5

नोड को निकालने के लिए आप इस समाधान यह मुझे मदद की कोशिश कर सकते हैं उत्पन्न करने के लिए निम्न प्रयास करें।

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);