How to remove elements from jquery object

Question

I have a specific problem. I want to grab some element, traverse through it and remove or edit unwanted elements before posting that element data over JSON.

My function looks like this.

$("#submit_btn").off("click").on("click", function(e) {
        e.preventDefault();

        pdfhtml = $("#Calculation").html();
        var inputs = $("input[type=number]", pdfhtml);

        $.each(inputs, function(k, v) {
            $(this).remove();
            //$(this, pdfhtml).remove(); //also not working
        })

        var data = {};
        data["data"] = pdfhtml;
        alert(pdfhtml);
        getdataJSON("","POST", "html", data, true); 
    });

The problem I have is that nothing happens, elements are still present after i submit this data. What am I doing wrong? I need this in order to generate pdf with mpdf6 (PHP).

Answer 1

You are creating a temp jQuery object and is removing inputs form that but the original string pdfhtml is not modified

$("#submit_btn").off("click").on("click", function (e) {
    e.preventDefault();

    //create a temp dom structure with the target html as its content
    var $temp = $('<div />', {
        html: $("#Calculation").html()
    });

    //modify the temp dom structure
    $temp.find("input[type=number]").remove();

    var data = {};
    //get the update html content from the temp object
    data["data"] = $temp.html();
    alert(pdfhtml);
    getdataJSON("", "POST", "html", data, true);
});

Answer 2

jQuery won't do string modification like that. All inputs will be is an in-memory representation of <input> tags, changes to these will not save back to the pdfhtml string.

What you should do instead is clone the #Calculation div, then perform your actions:

$("#submit_btn").off("click").on("click", function(e) {
    e.preventDefault();

    var pdfhtml = $("#Calculation").clone(); // Clone this
    var inputs = pdfhtml.find("input[type=number]");

    $.each(inputs, function(k, v) {
        $(this).remove();
    });

    var data = {};
    data["data"] = pdfhtml.html(); // Read the HTML here...
    alert(pdfhtml);
    getdataJSON("","POST", "html", data, true); 
});