So entfernen Sie Textbox mit Jquery On Button Klicken Sie

Hier möchte ich neue Textbox auf Klick der Schaltfläche dh BtnAdd und hinzufügen und auch diese neu hinzugefügte Textbox entfernen möchten, indem Sie auf die Schaltfläche btnRemove, die auch zusammen mit der neuen hinzugefügt wird Textfeld auf einen Klick von btnAdd.
Nun ist das Problem, dass, wenn ich die Schaltfläche Hinzufügen, d. H. BtnAdd neue Textfeld mit entfernen Schaltfläche, d. H. BtnRemove wird auch als erforderlich hinzugefügt, aber als ich auf Entfernen Schaltfläche klicken, d. HtnEntfernen Sie die entsprechende Textbox und das jeweilige Entfernen-Schaltfläche wird nicht entfernt.

Im Folgenden finden Sie, was ich

So entfernen Sie Textbox mit Jquery On Button Klicken Sie

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="a"> 
    <input id="Text1" type="text" /> 
</div> 
<input id="btnAdd" type="button" value="Add" /> 
<script> 
    $(document).ready(function() { 
     $("#btnAdd").click(function() { 
      $("#a").append('<input type="text" id="Text1" value="" />'+'<input type="button" id="btnRemove" value="Remove"/>'); 
     }); 
     $('#btnRemove').click(function() { 
      $('#Text1').remove(); 
      $(this).remove(); 
     }); 
    }); 
</script> 
</body> 
</html>

Quelle

2017-01-19 CrossWords

Verwenden [Event Delegation] zu entfernen (http : //learn.jquery.com/events/event-delegation/) für dynamisch generierte Elemente – Satpal

Siehe: [Textbox dynamisch erstellen und mit jquery entfernen] (https://www.google.co.in/url?sa= t & rct = j & q = & esrc = s & quellen = web & cd = 2 & cad = rja & uact = 8 & ved = 0ahUKEwix9dSpic7RAhVJLo8K Hc1_COgQFggMAE & url = http% 3A% 2F% 2Fwww.aspsnippets.com% 2Farticles% 2FDynamisch-hinzufügen-und-entfernen-TextBoxes-using-jQuery.aspx & usg = AFQjCNGVXWPbc-JJBHIFviSebDP4ZLayyw & bvm = bv.144224172, d.c2I) –

Ihr Skript wird nicht funktionieren während Sie versuchen, dieselbe ID beim Erzeugen dynamischer Elemente erneut zuzuweisen. Sie sollten stattdessen "Class" und "Name" -Attribut verwenden –

eine Klasse hinzu Schaltfläche Entfernen getan haben. Lass es btnRemove sein. Da es sich um ein dynamisch generiertes Element handelt, muss das Ereignis beim Entfernen des Objekts delegiert werden.

In Ihrem Fall $(this).remove() wird die Schaltfläche entfernen, aber es ist erforderlich, das Eingabefeld und die Schaltfläche auch zu entfernen. So ist es besser, alles in einem div & Ziel wickeln diese Wrapper div auf Klick auf Schaltfläche Entfernen dieser Ausschnitt

Hoffnung nützlich

$(document).ready(function() { 
    $("#btnAdd").click(function() { 
    $("#a").append('<div class="con"><input type="text" id="Text1" value="" />' + '<input type="button" class="btnRemove" value="Remove"/></div>'); 
    }); 
    // delegating event here 
    $('body').on('click','.btnRemove',function() { 
    $(this).parent('div.con').remove() 

    }); 
});

wird

DEMO

Quelle

2017-01-19 11:17:56 brk

Vielen Dank – CrossWords

So entfernen Sie Textbox mit Jquery On Button Klicken Sie

Antwort

Verwandte Themen