बनाने के लिए, ऐड () विधि का उपयोग करें, जबकि बनाए गए और संलग्न तत्व को हटाने के लिए, आप हटा सकते हैं ()। निम्नलिखित कोड है -
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div class="">
<ul id="listOfName"></ul>
</div>
<div class="">
<h1 class="">Add A New Name</h1>
<div class="">
<input type="text" id="name" placeholder="Add Name......">
<button class="btn" id="addNameButton">AddName</button>
</div>
</div>
</div>
<script>
var givenName = document.querySelector('#name')
var btnClass = document.querySelector('#addNameButton')
var listOfName = document.querySelector('#listOfName')
btnClass.addEventListener('click', () => {
var actualName = givenName.value
if (actualName.length != 0) {
var createAnHTMLList = `<li class=""><div>${actualName}</div><button
onclick="removeNameFromTheList(this)">Remove Name</button>`
listOfName.innerHTML += createAnHTMLList
givenName.value = ''
givenName.classList.remove('red')
} else{
givenName.classList.add('red')
}
})
function removeNameFromTheList(e) {
e.parentElement.remove()
}
</script>
</body>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें और फ़ाइल पर राइट क्लिक करें। वीएस कोड संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें।
आउटपुट
यह निम्नलिखित आउटपुट देगा -
यहां, मैं दो नाम जोड़ रहा हूं, जो जॉन, डेविड हैं। स्नैपशॉट इस प्रकार है। आइए पहले "जॉन" जोड़ें और "नाम जोड़ें" पर क्लिक करें -
"नाम जोड़ें" बटन पर क्लिक करें। आपको निम्न आउटपुट मिलेगा -
अब तुम दाऊद के साथ भी कर सकते हो। दोनों नाम जोड़ने के बाद, आपको निम्न नमूना आउटपुट मिलेगा।
अब, मैं 'जॉन' नाम हटाने जा रहा हूं। यह निम्नलिखित आउटपुट देगा -
