删除输入框

Question

您好，如何在不破坏所有其他控件的情况下删除更改颜色输入框？

谢谢

代码在我关心的最后几行下面

function PolygonCreator(map) {
    this.map = map;
    this.pen = new Pen(this.map);
    var thisOjb = this;
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) {
        thisOjb.pen.draw(event.latLng);
    });
    this.showData = function () {
        return this.pen.getData();
    }
    this.showColor = function () {
        return this.pen.getColor();
    }
    this.destroy = function () {
        this.pen.deleteMis();
        if (null != this.pen.polygon) {
            this.pen.polygon.remove();
        }
        google.maps.event.removeListener(this.event);
    }
}

function Pen(map) {
    this.map = map;
    this.listOfDots = new Array();
    this.polyline = null;
    this.polygon = null;
    this.currentDot = null;
    this.draw = function (latLng) {
        if (null != this.polygon) {
            alert('Click Reset to draw another');
        } else {
            if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
                this.drawPloygon(this.listOfDots);
            } else {
                if (null != this.polyline) {
                    this.polyline.remove();
                }
                var dot = new Dot(latLng, this.map, this);
                this.listOfDots.push(dot);
                if (this.listOfDots.length > 1) {
                    this.polyline = new Line(this.listOfDots, this.map);
                }
            }
        }
    }
    this.drawPloygon = function (listOfDots, color, des, id) {
        this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
        this.deleteMis();
    }
    this.deleteMis = function () {
        $.each(this.listOfDots, function (index, value) {
            value.remove();
        });
        this.listOfDots.length = 0;
        if (null != this.polyline) {
            this.polyline.remove();
            this.polyline = null;
        }
    }
    this.cancel = function () {
        if (null != this.polygon) {
            (this.polygon.remove());
        }
        this.polygon = null;
        this.deleteMis();
    }
    this.setCurrentDot = function (dot) {
        this.currentDot = dot;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getData = function () {
        if (this.polygon != null) {
            var data = "";
            var paths = this.polygon.getPlots();
            paths.getAt(0).forEach(function (value, index) {
                data += (value.toString());
            });
            return data;
        } else {
            return null;
        }
    }
    this.getColor = function () {
        if (this.polygon != null) {
            var color = this.polygon.getColor();
            return color;
        } else {
            return null;
        }
    }
}

function Dot(latLng, map, pen) {
    this.latLng = latLng;
    this.parent = pen;
    this.markerObj = new google.maps.Marker({
        position: this.latLng,
        map: map
    });
    this.addListener = function () {
        var parent = this.parent;
        var thisMarker = this.markerObj;
        var thisDot = this;
        google.maps.event.addListener(thisMarker, 'click', function () {
            parent.setCurrentDot(thisDot);
            parent.draw(thisMarker.getPosition());
        });
    }
    this.addListener();
    this.getLatLng = function () {
        return this.latLng;
    }
    this.getMarkerObj = function () {
        return this.markerObj;
    }
    this.remove = function () {
        this.markerObj.setMap(null);
    }
}

function Line(listOfDots, map) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.polylineObj = null;
    if (this.listOfDots.length > 1) {
        var thisObj = this;
        $.each(this.listOfDots, function (index, value) {
            thisObj.coords.push(value.getLatLng());
        });
        this.polylineObj = new google.maps.Polyline({
            path: this.coords,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: this.map
        });
    }
    this.remove = function () {
        this.polylineObj.setMap(null);
    }
}

function Polygon(listOfDots, map, pen, color) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.parent = pen;
    this.des = 'Hello';
    var thisObj = this;
    $.each(this.listOfDots, function (index, value) {
        thisObj.coords.push(value.getLatLng());
    });
    this.polygonObj = new google.maps.Polygon({
        paths: this.coords,
        strokeColor: "#3333FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#3333FF",
        fillOpacity: 0.35,
        map: this.map
    });
    this.remove = function () {
        this.info.remove();
        this.polygonObj.setMap(null);
    }
    this.getContent = function () {
        return this.des;
    }
    this.getPolygonObj = function () {
        return this.polygonObj;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getPlots = function () {
        return this.polygonObj.getPaths();
    }
    this.getColor = function () {
        return this.getPolygonObj().fillColor;
    }
    this.setColor = function (color) {
        return this.getPolygonObj().setOptions({
            fillColor: color,
            strokeColor: color,
            strokeWeight: 2
        });
    }
    this.info = new Info(this, this.map);
    this.addListener = function () {
        var info = this.info;
        var thisPolygon = this.polygonObj;
        google.maps.event.addListener(thisPolygon, 'rightclick', function (event) {
            info.show(event.latLng);
        });
    }
    this.addListener();
}

function Info(polygon, map) {
    this.parent = polygon;
    this.map = map;
    this.color = document.createElement('input');
    this.button = document.createElement('input');
    $(this.button).attr('type', 'button');
    $(this.button).val("Change Color");
    var thisOjb = this;
    this.changeColor = function () {
        thisOjb.parent.setColor($(thisOjb.color).val());
    }
    this.getContent = function () {
        var content = document.createElement('div');
        $(this.color).val(this.parent.getColor());
        $(this.button).click(function () {
            thisObj.changeColor();
        });
        $(content).append(this.color);
        $(content).append(this.button);
        return content;
    }
    thisObj = this;
    this.infoWidObj = new google.maps.InfoWindow({
        content: thisObj.getContent()
    });
    this.show = function (latLng) {
        this.infoWidObj.setPosition(latLng);
        this.infoWidObj.open(this.map);
    }
    this.remove = function () {
        this.infoWidObj.close();
    }
}

Answer 1

似乎只在最后一个函数Info中引用了button。所以我要说的是，注释掉该函数中引用它的5行代码(以及构成click处理程序一部分的另外2行代码)是安全的。

如果您只想对用户隐藏此按钮，那么您可能只想在调用Info之后对其执行.hide()操作。这将是侵入性最小的。

$('input[value="Change Color"]').hide();

Answer 2

    function PolygonCreator(map) {
    this.map = map;
    this.pen = new Pen(this.map);
    var thisOjb = this;
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) {
        thisOjb.pen.draw(event.latLng);
    });
    this.showData = function () {
        return this.pen.getData();
    }
    this.showColor = function () {
        return this.pen.getColor();
    }
    this.destroy = function () {
        this.pen.deleteMis();
        if (null != this.pen.polygon) {
            this.pen.polygon.remove();
        }
        google.maps.event.removeListener(this.event);
    }
}

function Pen(map) {
    this.map = map;
    this.listOfDots = new Array();
    this.polyline = null;
    this.polygon = null;
    this.currentDot = null;
    this.draw = function (latLng) {
        if (null != this.polygon) {
            alert('Click Reset to draw another');
        } else {
            if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
                this.drawPloygon(this.listOfDots);
            } else {
                if (null != this.polyline) {
                    this.polyline.remove();
                }
                var dot = new Dot(latLng, this.map, this);
                this.listOfDots.push(dot);
                if (this.listOfDots.length > 1) {
                    this.polyline = new Line(this.listOfDots, this.map);
                }
            }
        }
    }
    this.drawPloygon = function (listOfDots, color, des, id) {
        this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
        this.deleteMis();
    }
    this.deleteMis = function () {
        $.each(this.listOfDots, function (index, value) {
            value.remove();
        });
        this.listOfDots.length = 0;
        if (null != this.polyline) {
            this.polyline.remove();
            this.polyline = null;
        }
    }
    this.cancel = function () {
        if (null != this.polygon) {
            (this.polygon.remove());
        }
        this.polygon = null;
        this.deleteMis();
    }
    this.setCurrentDot = function (dot) {
        this.currentDot = dot;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getData = function () {
        if (this.polygon != null) {
            var data = "";
            var paths = this.polygon.getPlots();
            paths.getAt(0).forEach(function (value, index) {
                data += (value.toString());
            });
            return data;
        } else {
            return null;
        }
    }
    this.getColor = function () {
        if (this.polygon != null) {
            var color = this.polygon.getColor();
            return color;
        } else {
            return null;
        }
    }
}

function Dot(latLng, map, pen) {
    this.latLng = latLng;
    this.parent = pen;
    this.markerObj = new google.maps.Marker({
        position: this.latLng,
        map: map
    });
    this.addListener = function () {
        var parent = this.parent;
        var thisMarker = this.markerObj;
        var thisDot = this;
        google.maps.event.addListener(thisMarker, 'click', function () {
            parent.setCurrentDot(thisDot);
            parent.draw(thisMarker.getPosition());
        });
    }
    this.addListener();
    this.getLatLng = function () {
        return this.latLng;
    }
    this.getMarkerObj = function () {
        return this.markerObj;
    }
    this.remove = function () {
        this.markerObj.setMap(null);
    }
}

function Line(listOfDots, map) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.polylineObj = null;
    if (this.listOfDots.length > 1) {
        var thisObj = this;
        $.each(this.listOfDots, function (index, value) {
            thisObj.coords.push(value.getLatLng());
        });
        this.polylineObj = new google.maps.Polyline({
            path: this.coords,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: this.map
        });
    }
    this.remove = function () {
        this.polylineObj.setMap(null);
    }
}

function Polygon(listOfDots, map, pen, color) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.parent = pen;
    this.des = 'Hello';
    var thisObj = this;
    $.each(this.listOfDots, function (index, value) {
        thisObj.coords.push(value.getLatLng());
    });
    this.polygonObj = new google.maps.Polygon({
        paths: this.coords,
        strokeColor: "#3333FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#3333FF",
        fillOpacity: 0.35,
        map: this.map
    });
    this.remove = function () {
        this.info.remove();
        this.polygonObj.setMap(null);
    }
    this.getContent = function () {
        return this.des;
    }
    this.getPolygonObj = function () {
        return this.polygonObj;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getPlots = function () {
        return this.polygonObj.getPaths();
    }
    this.getColor = function () {
        return this.getPolygonObj().fillColor;
    }
    this.setColor = function (color) {
        return this.getPolygonObj().setOptions({
            fillColor: color,
            strokeColor: color,
            strokeWeight: 2
        });
    }
    this.info = new Info(this, this.map);
    this.addListener = function () {
        var info = this.info;
        var thisPolygon = this.polygonObj;
        //google.maps.event.addListener(thisPolygon, 'rightclick', function (event) {
          //  info.show(event.latLng);
        //});
    }
    this.addListener();
}

function Info(polygon, map) {
    this.parent = polygon;
    this.map = map;
    this.color = document.createElement('input');
    this.button = document.createElement('input');
    $(this.button).attr('type', 'button');
    $(this.button).val("Change Color");
    var thisOjb = this;
    this.changeColor = function () {
        thisOjb.parent.setColor($(thisOjb.color).val());
    }
    this.getContent = function () {
        var content = document.createElement('div');
        $(this.color).val(this.parent.getColor());
        //$(this.button).click(function () {
          //  thisObj.changeColor();
       // });
        $(content).append(this.color);
        $(content).append(this.button);
        return content;
    }
    thisObj = this;
    this.infoWidObj = new google.maps.InfoWindow({
        content: thisObj.getContent()
    });
    this.show = function (latLng) {
        this.infoWidObj.setPosition(latLng);
        this.infoWidObj.open(this.map);
    }
    this.remove = function () {
        this.infoWidObj.close();
    }
}

固定